Vue中使用echarts实现柱状图（双柱）

实现效果：

echarts使用说明请查看：Vue中使用echarts实现常用图表总结

option配置：

option = {
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  crossStyle: {
                    color: '#999'
                  }
                }
              },
              legend: {
                icon: 'rect',//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
                itemWidth: 10,  // 设置宽度
                itemHeight: 4, // 设置高度
                itemGap: 24, // 设置间距
                data: ['最高温', '最低温'],
                textStyle: {
                    //文字样式
                    color: '#c1dafc',
                    fontSize: '12'
                },
                right: '30%'
              },
              xAxis: [
                {
                  type: 'category',
                  data: ['第一日', '第二日', '第三日', '第四日', '第五日', '第六日', '第七日', '第八日', '第九日', '第十日'],
                  axisPointer: {
                    type: 'shadow'
                  }
                }
              ],
              yAxis: [
                {
                  type: 'value',
                  name: '单位：(°C)',
                  min: 0,
                  max: 50,
                  interval: 10,
                  axisLabel: {
                    formatter: '{value}'
                  }
                }
              ],
              series: [
                {
                  name: '最高温',
                  type: 'bar',
                  barWidth: '5%',
                  data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0]
                },
              {
                name: '最低温',
                type: 'bar',
                barWidth: '5%',
                data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8]
              }
              ],
              color: ['#b1de6a', '#4ab0ee']
            };

数据动态显示改变series中的data值即可