vue中echarts图表(一)---正负轴柱状图

一、安装

npm i echarts--save

二、引入

//全局引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

//局部【这里使用局部引入】
import echarts from 'echarts';

三、代码

 

<template>
  <!-- 容器 -->
  <div id="cylinderEcharts" ref="cylinderEcharts" style="width:900px;height:500px"></div>
</template>

<script>
import echarts from 'echarts';
export default {
data() {
  return{
     // 正负柱状图
      zhengfuZhu: {},
      data1: [],
      data2: [],
      data3: [],
      data4: [],
      xAxisData1: [],//横轴刻度
      seriesLabel: { //柱子上的字体
        show: false,
        position: 'outside',
        color: '#BEC3EB',
      },
      seriesEmphasis: { //
        itemStyle: {
          shadowBlur: 20,
          shadowColor: 'rgba(0,0,0,0.3)'
        }
      },
      seriesBarWidth: 17,//设置柱子粗细
      seriesYears: ['2022', '2023'],
      seriesColors: ['#5871c0', '#9eca7f', '#f3c96b', '#de6e6a'],
  }
},
mounted() {
        for (let i = 0; i < 12; i++) {
            this.xAxisData1.push(i + 1 + "月");
            this.data1.push(+(Math.random() * 200).toFixed(2));
            this.data3.push(+(Math.random() * 500).toFixed(2));
            this.data2.push(-(Math.random() + 300).toFixed(2));
            this.data4.push(-(Math.random() + 100).toFixed(2));
          }
          this.$nextTick(() => { //加这这防止容器还未出来，就去初化下，会报如下错误
            this.drawLine();
          })
},
methods: {
   drawLine(){
      this.zhengfuZhu = {
        legend: {
          data: [`${this.seriesYears[0]}计划完成任务`, `${this.seriesYears[0]}实际完成任务`,
          `${this.seriesYears[1]}计划完成任务`, `${this.seriesYears[1]}实际完成任务`],
          right: '10%',
          icon: 'circle',
          textStyle: {
            color: ' #BEC3EB',
            fontSize: 13
          },
          itemWidth: 12, // 设置宽度
          itemHeight: 12, // 设置高度
          itemGap: 15,
          formatter: function (value) {
            return value
          },
        },
        // tooltip: {
        //   formatter: function (params) {
        //     var value = params.value;
        //     //首先要看看params是怎样的数据结构，里面有什么内容;
        //     if (value < 0) {
        //         value = -value
        //     }
        //     return params.seriesName + '：' + value + ''
        //   }
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        xAxis: {
          data: this.xAxisData1,
          splitArea: { show: false },
          axisLabel: {
            textStyle: {
              color: '#5871c0',
              fontSize: 13
            },
          },
        },
        yAxis: [
          {
            type: 'value',
            splitNumber: 10,
            splitLine: {
              show: true, lineStyle: {
                color: '#6469A1',
                width: 1,
                type: 'solid'
              }
            },
            axisLabel: {
              formatter: function (value) {
                // Function formatter
                if (value < 0) {
                    value = -value
                } else {
                    value = value
                }
                return value + ''
              },
              textStyle: {
                  color: ' #BEC3EB',
                  fontSize: 13
              },
            },
          }],
        grid: {
          bottom: 25,
          top: 35,
          right: 0
        },
        series: [
          {
            name: `${this.seriesYears[0]}计划完成任务`,
            type: 'bar',
            stack: 'one',
            label: this.seriesLabel,
            emphasis: this.seriesEmphasis,
            data: this.data1,
            barWidth: this.seriesBarWidth,
            itemStyle: {
              // 柱状图颜色
              color: this.seriesColors[0]
            }
          },
          {
            name: `${this.seriesYears[0]}实际完成任务`,
            type: 'bar',
            label: this.seriesLabel,
            stack: 'two',
            emphasis: this.seriesEmphasis,
            barWidth: this.seriesBarWidth,
            data: this.data3,
            itemStyle: {
            // 柱状图颜色
            color: this.seriesColors[1]
            }
          },
          {
            name: `${this.seriesYears[1]}实际完成任务`,
            type: 'bar',
            label: this.seriesLabel,
            stack: 'one',
            emphasis: this.seriesEmphasis,
            data: this.data2,
            barWidth: this.seriesBarWidth,
            itemStyle: {
              // 柱状图颜色
              color: this.seriesColors[2]
            }
          },
          {
            name: `${this.seriesYears[1]}计划完成任务`,
            type: 'bar',
            label: this.seriesLabel,
            stack: 'two',
            emphasis: this.seriesEmphasis,
            barWidth: this.seriesBarWidth,
            data: this.data4,
            itemStyle: {
              // 柱状图颜色
              color: this.seriesColors[3]
            }
          },
        ],
      }
      console.log('this.$refs.cylinderEcharts--',document.getElementById('cylinderEcharts'));
      var myChart2 = echarts.init(this.$refs.cylinderEcharts);//echarts.init(document.getElementById('cylinderEcharts'));
      myChart2.setOption(this.zhengfuZhu);
    },
}

}


</script>

 

 一定要等容器加载出来，再去初始化图表，要不然会报如下错误

最终效果如下

 参考文章：https://blog.csdn.net/qq_41579104/article/details/132023123