柱状图echarts使用

1. 引入echarts组件

• eharts官网: Apache ECharts
• 安装echarts

  cnpm install echarts --save

2. 在官网的实例中找需要的柱状图

2.1 在echarts官方提供的编辑器中打开

3. 在官网的实例中找需要的柱状图

引入我们的项目中:

• 在dashboard使用

  import echarts from "echarts"

• 创建一个dom挂载点,用来挂载echarts实例。(注意:此时需要给dom设置宽高)

  <template>
  <!-- echarts的挂在对象 -->
  <div ref="barEchartsBox" style="width:100%;height:100%" />
  </template>

• 柱状图颜色渐变

  

• 柱状图动画
   

  

  

• 图例

  

• 在methods里添加一个实例,注意官网给的例子只有option,我们还有自己init一个echarts实例,具体配置看备注

  initBar() {
  var xAxisData = []
  var data1 = []
  var data2 = []
  // 模拟80条数据
  for (var i = 0; i < 80; i++) {
      xAxisData.push('date' + i)
      data1.push(Math.ceil(Math.random() * 10))
      data2.push(Math.ceil(Math.random() * 10))
  }
  
  var option = {
      // 标题的参数
      title: {
          text: '订单退单柱状图',
          // 标题字体样式
          textStyle: {
              color: '#9AA8D4',
              fontSize: 22,
              fontWeight: 'normal'
          }
      },
      // 两个按钮的样式
      legend: {
          // 对应 series里的 name
          data: ['订单', '退单'],
          // 距离底部
          bottom: 10,
          // 字体样式
          textStyle: {
              color: '#A8AAB3', // 坐标值得具体的颜色
              fontSize: 12
          }
      },
      // toolbox: {
      //     // y: 'bottom',
      //     // 右上角工具栏
      //     feature: {
      //         magicType: {
      //             type: ['stack', 'tiled']
      //         },
      //         dataView: {},
      //         saveAsImage: {
      //             pixelRatio: 2
      //         }
      //     }
      // },
      tooltip: {
      formatter:function (params, ticket, callback) {
        return params.marker + params.seriesName + '<br/>' + params.name + ":" +params.value;
      },
      xAxis: {
          data: xAxisData,
          // 网格是否显示
          splitLine: {
              show: false
          },
          // x线的样式
          axisLine: {
              lineStyle: {
                  type: 'solid',
                  color: '#A8AAB3', // 左边线的颜色
                  width: '1'// 坐标线的宽度
              }
          },
          axisLabel: {
              // 坐标轴字体样式
              textStyle: {
                  color: '#A8AAB3', // 坐标值得具体的颜色
                  fontSize: 12
              }
          }
      },
      yAxis: {
          splitLine: {
              show: false
          },
          // y线的样式
          axisLine: {
              lineStyle: {
                  type: 'solid',
                  color: '#A8AAB3', // 左边线的颜色
                  width: '1'// 坐标线的宽度
              }
          },
          axisLabel: {
              // 坐标轴字体样式
              textStyle: {
                  color: '#A8AAB3', // 坐标值得具体的颜色
                  fontSize: 12
              }
          }
      },
      series: [{
          name: '订单',
          type: 'bar',
          data: data1,
          itemStyle: {
              normal: {
                  // 渐变柱状图
                  color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [
                          { offset: 0, color: '#7D05E2' }, // 柱图渐变色
                          { offset: 0.5, color: '#B600FF' }, // 柱图渐变色
                          { offset: 1, color: '#BC04E2' } // 柱图渐变色
                      ]
                  )
              }
  
          }
  
      }, {
          name: '退单',
          type: 'bar',
          data: data2,
          itemStyle: {
              normal: {
                  // 渐变柱状图
                  color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [
                          { offset: 0, color: '#24CBFF' }, // 柱图高亮渐变色
                          { offset: 0.5, color: '#24A3FF' }, // 柱图高亮渐变色
                          { offset: 1, color: '#2492FF' } // 柱图高亮渐变色
                      ]
                  )
              }
  
          }
  
      }],
      // 柱子弹出来的动画样式
      animationEasing: 'elasticOut',
      animationDelayUpdate: function(idx) {
          return idx * 5
      }
  }
  // 这里要init一个echarts实例
  var myEcharts = echarts.init(this.$refs.barEchartsBox)
  // 然后把option赋值给实例
  myEcharts.setOption(option)
  }

• mounted里调用,确保dom加载完毕以后调用

  mounted(){
    this.initBar()
  }

• 效果图