最近做小程式的業務中遇到一個頁面要同時顯示幾個echarts圖，剛開始遇到各種衝突，死資料可以，動態資料就報錯的問題，折磨了一天，仔細看了官網和查在各種資料之後，終於解決了。
直接上程式碼：
commin.js /***
* echartName ： echarts的別名
* func ：渲染函式的函式名
* ***/
function wxCharts(echartName,fun) {
this.chart1 = echartName; //去獲取echarts 這裡的id就是echarts的id
this.chart1.init((canvas, width, height, dpr) => {
// 初始化圖表
let barChart = echarts.init(canvas, null, { //echarts會繼承父元素的寬高
width: width,
height: height,
devicePixelRatio: dpr // 畫素
});
barChart.setOption(fun);
return barChart; //一定要return出去
});
}
module.exports.wxCharts = wxCharts;
html :
<!--圓環 -->
<ec-canvas id="tendency" canvas-id="tendency" force-use-old-canvas="true" ec="{{ tendency }}" ></ec-canvas>
<!--或者：-->
<ec-canvas id="tendency" canvas-id="tendency" ec="{{ tendency }}" ></ec-canvas>
js:
data:{
//圓環
tendency: {
disableTouch: true,
lazyLoad: true
} },
//圓
tendencyInit:function (chartData) {
this.chart = this.selectComponent('#tendency'); //去獲取echarts 這裡的id就是echarts的id
commin.wxCharts(this.chart,this.tendencyvray(chartData))
},
// 這裡換成 所需折現圖的配置就可以了
tendencyvray: function (chartData) {
var option = {
backgroundColor: "#ffffff",
series: [{
type: 'pie',
label: {
normal: {
position: 'inner'
}
},
center: ['50%', '50%'],
radius: ['80%', '70%'],
data: chartData
}]
}
return option
}, //這裡是折現圖的資料就可以了
tendencyInitData:function () {
let chartData = [
{
value:20,
itemStyle: { color: '#FFD234' }
},
{
value:40,
itemStyle: { color: '#FF8340' }
},
{
value: 40,
itemStyle: { color: '#3AD868' }
}
]
this.tendencyInit(chartData)
},
html :
<!--疊加柱狀圖-->
<ec-canvas id="stat" canvas-id="stat" force-use-old-canvas="true" ec="{{ stat }}" ></ec-canvas>
<!--或者-->
<ec-canvas id="stat" canvas-id="stat" ec="{{ stat }}" ></ec-canvas>
js:
data:{
//疊加柱狀圖
stat:{
disableTouch: true,
lazyLoad: true
}
},
//疊加柱狀圖 --- chart圖
chargeYears:function (chartData) {
this.chart = this.selectComponent('#stat'); //去獲取echarts 這裡的id就是echarts的id
commin.wxCharts(this.chart,this.chargevrayYears(chartData))
},
chargevrayYears:function (chartData) {
let option = {
legend: {
data: ['完成工單', '轉派工單','超時工單']
},
tooltip:{
axisPointer:{
type:"shadow"
},
trigger:"axis"
},
label:{
position:"insideRight",
show:true
},
grid:{
top:'40',
bottom:"20%",
containLabel:true,
left:"3%",
right:"4%"
},
xAxis:{
data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
type:"category"
},
yAxis:{
type:"value"
},
series: chartData.seriesData
}
return option
},
chargeInitYears() {
var dataArr = [
{
data:[10,20,30,13,34,56,24,78,56,37,56,15],
label:{
"position":"insideRight",
},
name:"完成工單",
stack:"總量",
type:"bar",
color:"#4CC340",
},
{
data:[10,20,30,13,34,56,24,78,56,37,56,15],
label:{
"position":"insideRight",
},
name:"轉派工單",
stack:"總量",
type:"bar",
color:"#FAAA42"
},
{
data:[10,20,30,13,34,56,24,78,56,37,56,15],
label:{
"position":"insideRight",
},
name:"超時工單",
stack:"總量",
type:"bar",
color:"#FA734B"
},
]
for (var i = 0; i < dataArr.length; i++) {
var dic = dataArr[i];
dic['type'] = 'bar';
dic['itemStyle'] = {
normal: {
label: {
show: true, //開啟顯示
position: 'inside', //在上方顯示
distance: i == 0 ? 5 : 10,
formatter: function (val) {
if (val.value !== 0) {
return val.value;
} else {
return '';
}
},
textStyle: { //數值樣式
fontSize: 10,
color: '#fff'
}
},
}
}
}
var chartData = {
seriesData: dataArr
};
this.chargeYears(chartData)
},
html :
<!--柱狀圖-->
<ec-canvas id="station" canvas-id="station" force-use-old-canvas="true" ec="{{ station }}" ></ec-canvas>
<!--或者-->
<ec-canvas id="station" canvas-id="station" ec="{{ station }}" ></ec-canvas>
JS :
data:{
//柱狀圖
station:{
disableTouch: true,
lazyLoad: true
},
},
//柱狀圖 --- chart圖
station: function (chartData) {
this.chart = this.selectComponent('#station'); //去獲取echarts 這裡的id就是echarts的id
commin.wxCharts(this.chart,this.stationvray(chartData))
},
stationvray: function (chartData) {
var option = {
color:'#4CC340',
type: 'bar',
label: {
normal: {
show: true,
position: 'top'
}
},
grid: {
top:'0',
left: '3%',
right: '4%',
bottom: '20%',
containLabel: true
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'value',
},
yAxis: {
type: 'category',
data: ['小谷圍站場','羅衝圍站場','西北山站場','羅小黑站場','西北山站場'],
},
series: chartData.seriesData
}
return option
},
stationInitChart(){
var chartData = {
seriesData: [{
type:'bar',
label: {
show: true, //開啟顯示
position: 'inside', //在上方顯示
color:"#fff"
},
data: [14,28,38,24,32],
},
]
};
this.station(chartData)
}
index.html <!--圓-->
<ec-canvas id="warn" canvas-id="warn" force-use-old-canvas="true" ec="{{ warn }}" ></ec-canvas>
<!--或者-->
<ec-canvas id="warn" canvas-id="warn" ec="{{ warn }}" ></ec-canvas>
Js :
data:{
//圓
warn:{
disableTouch: true,
lazyLoad: true
}
},
// 圓
warnInit:function (chartData) {
this.chart = this.selectComponent('#warn'); //去獲取echarts 這裡的id就是echarts的id
commin.wxCharts(this.chart,this.warnvray(chartData))
},
warnvray: function (chartData) {
var option = {
backgroundColor: "#ffffff",
series: [{
label: {
formatter: '{b} \n\n {d}%',
},
type: 'pie',
center: ['50%', '40%'],
radius: ['15%', '50%'],
data: chartData
}]
}
return option
},
warnInitChart:function () {
let chartData = [
{
value:20,
name:"嚴重告警",
itemStyle: { color: '#fa393a' }
},
{
value:10,
name:"一級告警",
itemStyle: { color: '#FA6437' }
},
{
value: 30,
name:"二級告警",
itemStyle: { color: '#F79431' }
},
{
value: 30,
name:"三級告警",
itemStyle: { color: '#F0C61F' }
},
{
value: 10,
name:"提示告警",
itemStyle: { color: '#2997E6' }
}
]
this.warnInit(chartData)
}