vue柱状图+折线图组合

<template>
  <div id="main" style="width: 100%;height: 500px; padding-top: .6rem"></div>
</template>
 

     data() {
         return {
             weekData: ["1周","2周","3周","4周","5周","6周","7周","8周","9周","10周"], //柱状图横轴
             jdslData: [150, 220, 430, 360, 450, 680, 100, 450, 680, 200],  // 折线图的数据
             cyslData: [100, 200, 400, 300, 500, 500, 500, 450, 480, 400],  // 柱状图1的数据
             plgtData: [100, 200, 430, 360, 500, 500, 500, 450, 580, 500],  // 柱状图2的数据
             jdgtData: [300, 200, 100, 400, 100, 200, 100, 350, 380, 300],  // 柱状图3的数据
         }
     },

   stateFormat(num,n=2,symbol) {
       // 保证为number类型
       num = Number(num)
       if(typeof num!=='number')throw new TypeError('num参数应该是一个number类型');
       if(n<0)throw new Error('参数n不应该小于0');
       var hasDot=parseInt(num)!=num;//这里检测num是否为小数，true表示小数
       var m=(n!=undefined&&n!=null)?n:1;
       num=m==0?num.toFixed(m)+'.':hasDot?(n?num.toFixed(n):num):num.toFixed(m);
       symbol=symbol||',';
       num=num.toString().replace(/(\d)(?=(\d{3})+\.)/g,function(match, p1,p2) {
           return p1 + symbol;
       });
       if(n==0||(!hasDot&&!n)){//如果n为0或者传入的num是整数并且没有指定整数的保留位数，则去掉前面操作中的小数位
           num=num.substring(0,num.indexOf('.'));
       }
       return num;
   },
   
   drawLine(xAxisData, lineData1, lineData2, barData1, barData2)
   {
        let eChart = echarts.init(document.getElementById("main")); // 基于准备好的dom，初始化echarts实例
        this.eChart = eChart;
        eChart.setOption({
            // 绘制图表
            title: {text: ""},
            //鼠标悬浮提示语tooltip数据保留2位小数，或tooltip数据加单位，加%
            tooltip: {
               trigger: 'axis',
               axisPointer: {
                   type: 'shadow'
               },
	          // formatter: '{a}: {c}', //官方
	          formatter(params) {  //自定义
	              var relVal = params[0].name;
	              for (var i = 0, l = params.length; i < l; i++) {
	                  //遍历出来的值一般是字符串，需要转换成数字，再进项tiFixed四舍五入
	                  //relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value).toFixed(0)
                     relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + that.stateFormat(params[i].value,0)  //千分位
	              }
	              return relVal;
	          },
            },
            grid: {
                left: '3%',
                right: '3%',
                bottom: '3%',
                containLabel: true
            },
            legend: {//图例名
                show: true,
                data: ['工厂产能工天', '已接单工天', '已接单数量', '差异数量'],
                x: 'center',        //图例在中间center 左边left 右边right
                textStyle: {        //图例字体的颜色
                    color: "#000"   //图例文字
                }
            },

            xAxis: [
                // x轴 10周
                {
                    type: "category",
                    axisTick: {
                        show: false, // 坐标轴刻度
                    },
                    axisLine: {
                        show: true, // 坐标轴轴线
                        lineStyle: {
                            color: "#eeeeee",
                        },
                    },
                    axisLabel: {
                        // 坐标轴刻度标签的相关设置
                        inside: false,
                        textStyle: {
                            color: "#999",
                            fontWeight: "normal",
                            fontSize: "12",
                        },
                    },
                    splitLine: {show: false}, // 去除网格线
                    data: xAxisData,
                },
                {
                    type: "category",
                    axisLine: {show: false}, // 是否显示坐标轴轴线
                    axisTick: {show: false}, // 是否显示坐标轴刻度
                    axisLabel: {show: false}, // 是否显示刻度标签 柱状图上的标签
                    splitArea: {show: false}, // 是否显示分隔区域  背景遮罩
                    splitLine: {show: false}, // 是否显示分隔线
                },
            ],
            yAxis: [
                // y轴
                {
                    type: "value",
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#eeeeee",
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#bac0c0",
                            fontWeight: "normal",
                            fontSize: "12",
                        },
                        formatter: "{value}",
                    },
                    splitLine: {
                        show: true, // 去除网格线
                        lineStyle: {
                            color: '#f8f8f8'
                        }
                    },
                }
            ],
            series: [
                { // 柱状图1 工厂产能工天
                    type: "bar",
                    name: '工厂产能工天',
                    itemStyle: {
                        show: true,
                        //color: "#7ca6f8",  // 柱状图的颜色
                        color: "#5470C6",  // 柱状图的颜色
                        borderWidth: 0,
                        borderType: "solid",
                        emphasis: {
                            shadowBlur: 15,
                            shadowColor: "rgba(105,123, 214, 0.7)",
                        },
                    },
                    zlevel: 1,
                    barWidth: 40,
                    data: barData1,
                },

                { // 柱状图2  已接单工天
                    type: "bar",
                    name: '已接单工天',
                    itemStyle: {
                        show: true,
                        // color: "#6ebbb8",
                        color: "#91CC75",
                        borderWidth: 0,
                        borderType: "solid",
                        emphasis: {
                            shadowBlur: 15,
                            shadowColor: "rgba(105,123, 214, 0.7)",
                        },
                    },
                    zlevel: 2,
                    barWidth: 40,
                    data: barData2,
                },

                { // 折线1  已接单数量
                    zlevel: 3,
                    type: "line",
                    name: '已接单数量',
                    color: ["#8d83f7"],  // 拐点颜色
                    symbolSize: 8,   // 拐点的大小
                    symbol: "circle",  // 拐点样式
                    label: {
                        show: true,
                        position: 'top',
                        // formatter: '{c}'
                        formatter(params) {  //自定义
                             relVal = that.stateFormat(params.value,0);
                             return relVal;
                        },
                    },
                    data: lineData1,
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                color: "#8d83f7", // 折线的颜色
                                type: "solid" // 折线的类型
                            }
                        }
                    },
                    //悬浮标
                   // tooltip: {
                   //     formatter: '{b}<br/>已接单数量：{c}<br/>'
                   // }
                },

                { // 折线2  差异数量
                    zlevel: 4,
                    type: "line",
                    name: '差异数量',
                    color: ["#ef836f"],  // 拐点颜色
                    symbolSize: 8,   // 拐点的大小
                    symbol: "circle",  // 拐点样式
                    label: {
                        show: true,
                        position: 'top',
           				// formatter: '{c}'
                        formatter(params) {  //自定义
                             relVal = that.stateFormat(params.value,0);
                             return relVal;
                        },                        
                    },
                    data: lineData2,
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                color: "#ef836f", // 折线的颜色
                                type: "solid" // 折线的类型
                            }
                        }
                    },
                    //悬浮标
                    //tooltip: {
                    //    formatter: '{b}<br/>差异数量：{c}<br/>'
                    // }
                }
            ],
        });
    },


    that.drawLine(that.weekData,that.jdslData,that.cyslData,that.plgtData,that.jdgtData);