可视化项目之 - Echarts（渐变效果）

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

最近有几个项目是可视化方面的，在highCharts和Echarts之间选择了比较大众以及自己熟悉的Echarts。两者的优缺点在我看来，前者highCharts是基于svg的，对于动态的增删节点数据非常灵活，不需要重新绘图。然而后者是基于canvas，对于3d绘图和大量的数据比较有优势（echarts的作者御术现在在蚂蚁带可视化团队，后续的文章也会聊到有关蚂蚁的可视化项目）。

Echarts官网：echarts.apache.org/zh/index.ht…

这次实现的是一个折线图(渐变效果)

1. 安装echarts

npm install echarts --save

2. 引入echarts

import echarts from "echarts"; 
//修改原型链,可在全局使用 
Vue.prototype.$echarts = echart

3. 创建图表 首先需要在 HTML 中创建图表的容器

<div id="echarts_coverage"></div> '
// css 图表的容器必须指定宽高 

<style>
    #echarts_coverage{ width: 400px; height: 200px; }
</style>

4. 渲染图表

<script>
export default {
  mounted() {
    this.initLineChart();
  },
  methods: {
    initLineChart() {
      let data = [
        {
          dateStr: "2019第1季度",
          numberStr: 10,
        },
        {
          dateStr: "2019第1季度",
          numberStr: 50,
        },
        {
          dateStr: "2019第1季度",
          numberStr: 35,
        },
        {
          dateStr: "2019第1季度",
          numberStr: 92,
        },
        {
          dateStr: "2019第1季度",
          numberStr: 70,
        },
        {
          dateStr: "2019第1季度",
          numberStr: 80,
        },
      ];
      let lineData = {};
      lineData.label = data.map((item) => item.dateStr);
      lineData.data = data.map((item) => item.numberStr);
      let chart = this.$echarts.init(
        document.getElementById("echarts_coverage")
      );
      let option = {
        color: ["#3DB821"],
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "5%",
          bottom: "8%",
          top: "20%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          offset: 6,
          axisLine: { lineStyle: { color: " #CCCCCC" } },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            rotate: 18,
            textStyle: {
              color: "#000",
              fontStyle: "normal",
              fontFamily: "微软雅黑",
              fontSize: 13,
              margin: 10,
            },
          },
          data: lineData.label,
        },
        yAxis: {
          type: "value",
          name: "(%)",
          nameTextStyle: {
            align: "right",
            color: "#4D4D4D",
          },
          axisLine: {
            show: false,
            lineStyle: { color: "#CCCCCC" },
          },
          axisTick: { show: false },
          splitLine: {
            show: true,
            lineStyle: { type: "dashed", color: "#CCCCCC" },
          },
          axisLabel: {
            textStyle: {
              color: "#4D4D4D",
              fontSize: 14,
            },
          },
        },
        series: [
          {
            name: "数量",
            type: "line",
            stack: "总量",
            // symbol: "circle",
            symbolSize: 8,
            minInterval: 6,
            data: lineData.data,
            smooth: false,
            areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#3DB821", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "rgba(51,180,21,.5)", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(51,180,21,.1)", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
          },
        ],
      };
      chart.setOption(option);
    },
  },
};
</script>

图表意在何为呢，无非就是可以让我们直观的看到数据的展现，通过图表分析得出有价值的信息，而Echarts就刚好让这一点完美的呈现。正所谓，前人栽树，后人乘凉。