vue+echarts实现折线图

因为这里只演示了折线图，所以echarts引入方式是按需引入，大家如果需要用到其它种类图表的也可以全局引入所有组件

1、效果图

2、使用如下命令通过 npm 安装 ECharts

npm install echarts --save

3、echarts在页面中完整引入

var echarts = require('echarts');

默认使用 require(‘echarts’) 得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块

4、echarts在页面中按需引入

//引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入折线图等组件
require("echarts/lib/chart/line");
// 引入提示框和title组件，图例
require("echarts/lib/component/tooltip");
require("echarts/lib/component/grid");
require("echarts/lib/component/legend");

可以按需引入的模块列表见 https://github.com/apache/incubator-echarts/blob/master/index.js

5、代码示例

<template>
  <div>
    <div id="myChart"></div>
  </div>
</template>

<script>
//引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入折线图等组件
require("echarts/lib/chart/line");
// 引入提示框和title组件，图例
require("echarts/lib/component/tooltip");
require("echarts/lib/component/grid");
require("echarts/lib/component/legend");

export default {
  name: "test1",
  data() {
    return {
      // 注意：数据必须有初始值，否则tooltip不会显示
      // 注意：数据现在是写死的，可以请求接口之后重新赋值，生成动态折线图
      xArray_temper: [
        "2019-02-25",
        "2019-03-04",
        "2019-03-18",
        "2019-03-26",
        "2019-04-16",
        "2019-04-26",
        "2019-05-04"
      ],
      yArray_temper: [1, -2, 2, 5, 3, 2, 0]
    };
  },
  created() {
    var _this = this;
    setTimeout(function() {
      // 这里没有动态数据，所以用计时器进行了模拟
      // 实际情况应该在获取数据之后调用，且必须保证图表元素已经挂载到页面中去了
      _this.drawLine();
    }, 500);
  },
  methods: {
    drawLine() {
      var _this = this;
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart"));

      // 屏幕尺寸变化时，重新调整图表元素大小
      let sizeFun = function() {
        myChart.resize();
      };
      window.addEventListener("resize", sizeFun);

      // 绘制图表
      myChart.setOption({
      	// 折线图距离图表元素上下左右的距离
        grid: {
          bottom: "10%",
          right: "8%",
          left: "15%",
          top: "20%"
        },
        // 图例
        tooltip: {
          show: true,
          trigger: "axis",
          backgroundColor: "#821afe",
          formatter: "{b}<br/>{a} : {c}℃"
        },
        // x轴相关设置
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: _this.xArray_temper,
          splitLine: {
            // 隐藏网格线
            show: false
          },
          //  改变x轴颜色
          axisLine: {
            lineStyle: {
              color: "#fff"
            }
          },
          //  改变x轴字体颜色和大小
          axisLabel: {
            interval: 2, //x轴间隔多少显示刻度
            // formatter: '{value} m³ ', //  给y轴添加单位
            showMinLabel: true,
            showMaxLabel: true,
            textStyle: {
              color: "#fff",
              fontSize: 12,
              // 为了字体生效必须设置的
              rich: {}
            }
            // margin: 0,
          },
          scale: true,
          splitNumber: 2,
          show: false
        },
        // y轴相关设置
        yAxis: {
          type: "value",
          min: "dataMin", // 最小值
          max: "dataMax", // 最大值
          axisLabel: {
            formatter: "{value}"
          },
          splitLine: {
            // 隐藏、显示网格线
            show: true,
            lineStyle: {
              color: ["rgba(255,255,255,0.1)"],
              width: 1,
              type: "dashed"
            }
          },
          //  改变x轴颜色
          axisLine: {
            lineStyle: {
              color: "transparent"
            }
          },
          //  改变y轴字体颜色和大小
          axisLabel: {
            interval: 200000000000000, //x轴间隔多少显示刻度
            // formatter: '{value} m³ ', //  给y轴添加单位
            showMinLabel: true,
            showMaxLabel: true,
            textStyle: {
              color: "#fff",
              fontSize: 12,
              // 为了字体生效必须设置的
              rich: {}
            }
            // margin: 0,
          },
          splitNumber: 3
        },
        series: [
          {
            name: "温度",
            type: "line",
            // 取消折点圆圈
            symbol: "none",
            // 取平滑曲线
            smooth: true,
            animation: false,
            //折线数据
            data: _this.yArray_temper,
            // 折线颜色
            lineStyle: {
              normal: {
                color: "#fff",
                width: 2
              }
            },
            areaStyle: {},
            itemStyle: {
              normal: {
                // 面积颜色渐变
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(255,255,255,0.6)" },
                  { offset: 1, color: "rgba(255,255,255,0)" }
                ])
              }
            }
          }
        ]
      });
    }
  },

  components: {},

  mounted() {},

  computed: {},

  watch: {}
};
</script>

<style scoped>
/* 图表元素一定要设置宽高，否则默认宽高为0，图表无法显示 */
#myChart {
  width: 100%;
  height: 300px;
  background-color: skyblue;
}
</style>