vue echarts 柱状折线图

 
    <div id="bargainTrend" style="width: 100%;height:250px;"></div>


return {
       
 month: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], //柱状图横轴
        lineData1: [150, 220, 430, 360, 450, 680, 100, 450, 680, 200, 680, 200],  // 折线图的数据
        lineData2: [200, 210, 230, 350, 450, 600, 360, 456, 258, 369, 411, 256],
        barData1: [150, 220, 430, 360, 450, 680, 100, 450, 680, 200, 680, 200],  // 柱状图1的数据
        barData2: [200, 210, 230, 350, 450, 600, 360, 456, 258, 369, 411, 256],  // 柱状图2的数据

}

methods() {

       drawBargainOrderLine(xAxisData, lineData1, lineData2, barData1, barData2) { // xAxisData:x轴的值
        let eChart = this.$echarts.init(document.getElementById("bargainTrend")); // 基于准备好的dom，初始化echarts实例
        this.eChart = eChart;
        eChart.setOption({
          // 绘制图表
          title: {text: ""},
          tooltip: {
            formatter: '{a}: {c}'
          },
          grid: {
            left: '3%',
            right: '3%',
            bottom: '3%',
            containLabel: true
          },
          legend: {  //图例名
            show: true,
            data: ['订单金额', '订单量', '订单金额折线', '订单量折线'],
            right: "0%",
            textStyle: {
              color: "#000" //图例文字
            }
          },
          xAxis: [
            // x轴
            {
              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}, // 是否显示分隔线。
              // data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
            },
          ],
          yAxis: [
            // y轴
            {
              type: "value",
              axisTick: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#eeeeee",
                },
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: "#32346c ",
                },
              },
              axisLabel: {
                textStyle: {
                  color: "#bac0c0",
                  fontWeight: "normal",
                  fontSize: "12",
                },
                formatter: "{value}",
              },
            }
          ],
          series: [
            { // 柱状图1
              type: "bar",
              name: '订单金额',
              itemStyle: {
                show: true,
                color: "#301de0",  // 柱状图的颜色  ,
                borderWidth: 0,
                borderType: "solid",
                emphasis: {
                  shadowBlur: 15,
                  shadowColor: "rgba(105,123, 214, 0.7)",
                },
              },
              zlevel: 1,
              barWidth: 20,
              data: barData1,
            },
            { // 柱状图2
              type: "bar",
              name: '订单量',
              itemStyle: {
                show: true,
                color: "#a800ff",
                borderWidth: 0,
                borderType: "solid",
                emphasis: {
                  shadowBlur: 15,
                  shadowColor: "rgba(105,123, 214, 0.7)",
                },
              },
              zlevel: 2,
              barWidth: 20,
              data: barData2,
            },
            { // 折线
              zlevel: 4,
              type: "line",
              name: '订单金额折线',
              color: ["#301de0"],  // 拐点颜色
              symbolSize: 8,   // 拐点的大小
              symbol: "circle",  // 拐点样式
              data: lineData1,
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: "#8d83f7", // 折线的颜色
                    type: "solid" // 折线的类型
                  }
                }
              },
              tooltip: {
                formatter: '{b}<br/>订单金额：{c}<br/>'
              }
            },
            { // 折线
              zlevel: 5,
              type: "line",
              name: '订单量折线',
              color: ["#a800ff"],  // 拐点颜色
              symbolSize: 8,   // 拐点的大小
              symbol: "circle",  // 拐点样式
              data: lineData2,
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: "#8d83f7", // 折线的颜色
                    type: "solid" // 折线的类型
                  }
                }
              },
              tooltip: {
                formatter: '{b}<br/>订单量：{c}<br/>'
              }
            }
          ],
        });
      },

}