Vue使用Echart图标插件之柱状图

<template>
  <div class="count-chart-wrapper">
    <div class="chart-title">
      工程发货统计
      <span>(近六天)</span>
    </div>
    <div class="count-chart" ref="chart"></div><!--必须设置宽高-->
  </div>
</template>
 
<script>
import echarts from "echarts";
 
export default {
  data() {
    return {
      colorList: [
        //设置发货柱子的，普通的柱子颜色
        "#69D3BE",
        "#9D9E9F",
        "#F88282"
      ],
      colorList2: [
        //设置发货柱子的，柱子实现渐变色
        ["#0282DE", "#3F28D0"],
        ["#FED701", "#E66938"],
        ["#67E0E3", "#0181DE"]
      ]
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    // 初始化图表样式
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      let _this = this;
      this.chart.setOption({
        grid: {
          left: "50"
          // right: "60"
        },
        legend: {
          show: false,
          data: this.legends
        },
        tooltip: {
          trigger: "axis",
          show: true,
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          axisLine: { show: false }, // 轴线
          axisTick: { show: false }, // 刻度
          type: "category",
          data: ["一", "二", "三", "四", "五", "六"],//X轴显示
          axisLabel: {
            color: "#333",
            interval: 0 //0：不隔行显示，1：隔一行显示
          }
        },
        yAxis: {
          type: "value",
          nameTextStyle: {
            fontWeight: "bold",
            align: "left",
            padding: [0, 50, 10, 0],
            color: "#ffffff"
          },
          axisLine: { show: false }, // 轴线
          axisTick: { show: false }, // 刻度
          axisLabel: {
            color: "#333",
            formatter: `{value}`//Y轴的显示形式，value，percent
          }
        },
        series: [
          {//实现渐变色的柱子
            data: ["1", "2", "3", "1", "2", "3"],//显示的数据
            type: "bar",
            smooth: true, // 平滑
            symbol: "none",
            lineStyle: {
              color: "#FF5858"
            },
            barMaxWidth: 30,//设置柱子的宽度
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#222",
                    fontSize: 14
                  }
                },
                color: params => {
                  let colorList = _this.colorList2;//实现柱子的渐变色数组
                  let index = params.dataIndex;//dataIndex  data中数据的下标
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length;
                  }
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //渐变色使用方法
                    { offset: 0, color: colorList[index][0] },
                    { offset: 1, color: colorList[index][1] }
                  ]);
                }
              }
            }
          },
          {//实现普通色的柱子
            data: ["2.5", "3.5", "1.5", "2.5", "1.5", "2.5"],
            type: "bar",
            smooth: true, // 平滑
            symbol: "none",
            lineStyle: {
              color: "#FF5858"
            },
            barMaxWidth: 30,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: "top", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#222",
                    fontSize: 14
                  }
                },
                color: params => {
                  let colorList = _this.colorList;//柱子的颜色是普通的颜色
                  let index = params.dataIndex;
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length;
                  }
                  return colorList[index];
                }
              }
            }
          }
        ]
      });
    }
  }
};
</script>
 
<style>
.count-chart-wrapper {
  width: 800px;
  margin: 0 auto;
  background-color: antiquewhite;
}
.count-chart {
  position: relative;
  margin: 0 auto;
  width: 400px;
  height: 400px;
}
</style>