Vue2.0 echarts的使用

一、安装依赖echarts

npm install echarts -S

二、图表创建
2.1在main.js中，引入（全局）

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

2.2在.vue任意页面，如：index.vue
DOM代码

<div class="my-charts" ref="myChart"></div>

JS代码

export default {
  data() {
    return {};
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.myChart);
      // 绘制图表
      myChart.setOption({
        title: {
          text: "当周批转量和报备量",
          left: "5%"
        },
        tooltip: { trigger: "axis" },
        legend: {
          data: ["批转量", "报备量"],
          right: "5%"
        },
        grid: {
          left: "5%",
          right: "6%",
          bottom: "10%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["08-12", "08-13", "08-14", "08-15", "08-16", "08-17", "08-18"],
          axisLine: { lineStyle: { color: "#999", width: 0.1 } },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#999",
              width: 0.1
            }
          }
        },
        yAxis: {
          type: "value",
          axisLine: { lineStyle: { color: "#999", width: 0.1 } }
        },
        series: [
          {
            name: "批转量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20, 0],
            areaStyle: {
              color: "rgb(237,252,245)"
            },
            smooth: true,
            itemStyle: {
              normal: {
                color: "#53e59d"
              }
            }
          },
          {
            name: "报备量",
            type: "line",
            data: [15, 0, 36, 10, 10, 0, 0],
            areaStyle: {
              color: "rgb(220,247,245)"
            },
            smooth: true,
            itemStyle: {
              normal: {
                color: "#43c4fd"
              }
            }
          }
        ]
      });
    }
  }
};
</script>

三、效果图如下：