vue项目中，使用echarts完成折线+多柱状图（附完整代码）

柔情只为你懂 2022-12-20 08:51 16阅读 0赞

**结果展示：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70][]

**分析：**

（1）在echarts里面的 series里面写三种柱状+一种折线图

（2）该图谱也实现了自适应大小，缩小放大浏览器界面，柱状折线图也会随着变化，核心代码如下：

setTimeout(function (){   // 随着页面自适应
        window.onresize = function () {
          _this.eChart.resize();
        }
    },200)

**代码展示：（附完整代码）**

<template>
      <div id="echart" style="width: 100%;height: 500px; padding-top: .6rem"></div>
    </template>
    <script>
    let echarts = require("echarts/lib/echarts"); // 引入基本模板
    require("echarts/lib/chart/line"); // 引入折线图组件
    require("echarts/lib/chart/bar"); // 引入柱状图组件
    require("echarts/lib/component/tooltip"); // 引入提示框
    require("echarts/lib/component/title"); // title组件
    
    export default {
      name: "eCharts",
      data() {
        return {
          month: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"], //柱状图横轴
          lineData:[150, 220, 430, 360, 450, 680, 100,450, 680, 200,680, 200],  // 折线图的数据
          barData1:[100, 200, 400, 300, 500, 500, 500],  // 柱状图1的数据
          barData2:[100, 200, 400, 300, 500, 500, 500,450, 680, 200],  // 柱状图2的数据
          barData3:[300, 200, 100, 400, 100, 200, 100],  // 柱状图3的数据
        };
      },
      mounted() {
        let _this = this;
        const {month,lineData,barData1,barData2,barData3} = _this;
        _this.drawLine(month,lineData,barData1,barData2,barData3);
        setTimeout(function (){   // 随着页面自适应
            window.onresize = function () {
              _this.eChart.resize();
            }
        },200)
      },
      methods: {
        drawLine(xAxisData,lineData,barData1,barData2,barData3) { // xAxisData:x轴的值
          let eChart = echarts.init(document.getElementById("echart")); // 基于准备好的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}",
                },
                splitLine: { 
                  show: true , // 去除网格线
                  lineStyle:{
                    color:'#f8f8f8'
                  }
                }, 
              }
            ],
            series: [
              { // 柱状图1
                type: "bar",
                name:'正面',
                itemStyle: {
                  show: true,
                  color: "#7ca6f8",  // 柱状图的颜色
                  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: "#6ebbb8",
                  borderWidth: 0,
                  borderType: "solid",
                  emphasis: {
                    shadowBlur: 15,
                    shadowColor: "rgba(105,123, 214, 0.7)",
                  },
                },
                zlevel: 2,
                barWidth: 20,
                data: barData2,
              },
              { // 柱状图3
                type: "bar",
                name:'平和',
                itemStyle: {
                  show: true,
                  color: "#ef836f",
                  borderWidth: 0,
                  borderType: "solid",
                  emphasis: {
                    shadowBlur: 15,
                    shadowColor: "rgba(105,123, 214, 0.7)",
                  },
                },
                zlevel: 3,
                barWidth: 20,
                data: barData3,
              },
              { // 折线
                zlevel: 4,
                type: "line",
                name:'问卷',
                color: ["#8d83f7"],  // 拐点颜色
                symbolSize: 8,   // 拐点的大小
                symbol: "circle",  // 拐点样式
                data: lineData,
                itemStyle: {
                  normal: {
                    lineStyle: {
                      color: "#8d83f7", // 折线的颜色
                      type: "solid" // 折线的类型
                    }
                  }
                },
                tooltip:{
                  formatter: '{b}<br/>问卷得分：{c}<br/>'
                }
              }
            ],
          });
        },
      },
    };
    </script>

\-----完。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70]: /images/20221120/0d340ba0ba254086bc6d48af6f67fc3d.png