vue中echarts图表---正负轴柱状图

一、安装

npm i echarts--save

二、引入

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

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

三、代码

  1 <!-- 容器 -->
  2 <div id="cylinderEcharts" ref="cylinderEcharts" style="width:900px;height:500px"></div>
  3 
  4 <script>
  5 import echarts from 'echarts';
  6 export default {
  7 data() {
  8   return{
  9      // 正负柱状图
 10       zhengfuZhu: {},
 11       data1: [],
 12       data2: [],
 13       data3: [],
 14       data4: [],
 15       xAxisData1: [],//横轴刻度
 16       seriesLabel: { //柱子上的字体
 17         show: false,
 18         position: 'outside',
 19         color: '#BEC3EB',
 20       },
 21       seriesEmphasis: { //
 22         itemStyle: {
 23           shadowBlur: 20,
 24           shadowColor: 'rgba(0,0,0,0.3)'
 25         }
 26       },
 27       seriesBarWidth: 17,//设置柱子粗细
 28       seriesYears: ['2022', '2023'],
 29       seriesColors: ['#5871c0', '#9eca7f', '#f3c96b', '#de6e6a'],
 30   }  
 31 },
 32 mounted() {
 33         for (let i = 0; i < 12; i++) {
 34             this.xAxisData1.push(i + 1 + "月");
 35             this.data1.push(+(Math.random() * 200).toFixed(2));
 36             this.data3.push(+(Math.random() * 500).toFixed(2));
 37             this.data2.push(-(Math.random() + 300).toFixed(2));
 38             this.data4.push(-(Math.random() + 100).toFixed(2));
 39           }
 40           this.$nextTick(() => { //加这这防止容器还未出来，就去初化下，会报如下错误
 41             this.drawLine();
 42           })
 43 },
 44 methods: {
 45    drawLine(){
 46       this.zhengfuZhu = {
 47         legend: {
 48           data: [`${this.seriesYears[0]}计划完成任务`, `${this.seriesYears[0]}实际完成任务`,
 49           `${this.seriesYears[1]}计划完成任务`, `${this.seriesYears[1]}实际完成任务`],
 50           right: '10%',
 51           icon: 'circle',
 52           textStyle: {
 53             color: ' #BEC3EB',
 54             fontSize: 13
 55           },
 56           itemWidth: 12, // 设置宽度
 57           itemHeight: 12, // 设置高度
 58           itemGap: 15,
 59           formatter: function (value) {
 60             return value
 61           },
 62         },
 63         tooltip: {
 64           formatter: function (params) {
 65             var value = params.value;
 66             //首先要看看params是怎样的数据结构，里面有什么内容;
 67             if (value < 0) {
 68                 value = -value
 69             }
 70             return params.seriesName + '：' + value + ''
 71           }
 72         },
 73         xAxis: {
 74           data: this.xAxisData1,
 75           splitArea: { show: false },
 76           axisLabel: {
 77             textStyle: {
 78               color: '#5871c0',
 79               fontSize: 13
 80             },
 81           },
 82         },
 83         yAxis: [
 84           {
 85             type: 'value',
 86             splitNumber: 10,
 87             splitLine: {
 88               show: true, lineStyle: {
 89                 color: '#6469A1',
 90                 width: 1,
 91                 type: 'solid'
 92               }
 93             },
 94             axisLabel: {
 95               formatter: function (value) {
 96                 // Function formatter
 97                 if (value < 0) {
 98                     value = -value
 99                 } else {
100                     value = value
101                 }
102                 return value + ''
103               },
104               textStyle: {
105                   color: ' #BEC3EB',
106                   fontSize: 13
107               },
108             },
109           }],
110         grid: {
111           bottom: 25,
112           top: 35,
113           right: 0
114         },
115         series: [
116           {
117             name: `${this.seriesYears[0]}计划完成任务`,
118             type: 'bar',
119             stack: 'one',
120             label: this.seriesLabel,
121             emphasis: this.seriesEmphasis,
122             data: this.data1,
123             barWidth: this.seriesBarWidth,
124             itemStyle: {
125               // 柱状图颜色
126               color: this.seriesColors[0]
127             }
128           },
129           {
130             name: `${this.seriesYears[0]}实际完成任务`,
131             type: 'bar',
132             label: this.seriesLabel,
133             stack: 'two',
134             emphasis: this.seriesEmphasis,
135             barWidth: this.seriesBarWidth,
136             data: this.data3,
137             itemStyle: {
138             // 柱状图颜色
139             color: this.seriesColors[1]
140             }
141           },
142           {
143             name: `${this.seriesYears[1]}实际完成任务`,
144             type: 'bar',
145             label: this.seriesLabel,
146             stack: 'one',
147             emphasis: this.seriesEmphasis,
148             data: this.data2,
149             barWidth: this.seriesBarWidth,
150             itemStyle: {
151               // 柱状图颜色
152               color: this.seriesColors[2]
153             }
154           },
155           {
156             name: `${this.seriesYears[1]}计划完成任务`,
157             type: 'bar',
158             label: this.seriesLabel,
159             stack: 'two',
160             emphasis: this.seriesEmphasis,
161             barWidth: this.seriesBarWidth,
162             data: this.data4,
163             itemStyle: {
164               // 柱状图颜色
165               color: this.seriesColors[3]
166             }
167           },
168         ],
169       }
170       console.log('this.$refs.cylinderEcharts--',document.getElementById('cylinderEcharts'));
171       var myChart2 = echarts.init(this.$refs.cylinderEcharts);//echarts.init(document.getElementById('cylinderEcharts'));
172       myChart2.setOption(this.zhengfuZhu);
173     }, 
174 }
175 
176 }
177 
178 
179 </script> 

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

最终效果如下

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