小程序中多个echarts折线图在同一个页面的使用

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

最近做小程序的业务中遇到一个页面要同时显示几个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)
}