Echarts.js入门学习心得

Echarts，是做数据统计的，刚接触，很好用。
1、一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11），Chrome，Firefox，Safari等。
2、底层依赖轻量级Canva+库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
3、ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。Echarts官方文档

• 通过 npm 下载echarts，npm install echarts --save
• 也可通过yran下载echarts， yarn add echarts --save
  可在package.json中查看是否下载完成及版本号
  
  在main.js中全局引入
  
  也可按需引入
  

页面中写入了一些死数据，可供参考

<template>
  <div class="reports">
    <bread-crumn leavel="数据统计" leavels="数据报表"></bread-crumn>
    <div class="app">
      <div id="main" style="width: 100%; height: 600px"></div>
    </div>
  </div>
</template>

<script>
var echarts = require("echarts");
export default {
  name: "",
  props: {},
  data() {
    return {};
  },
  components: {},
  methods: {},
  created() {},
  mounted() {
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
      title: {
        text: "堆叠区域图",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      legend: {
        data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "邮件营销",
          type: "line",
          stack: "总量",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "联盟广告",
          type: "line",
          stack: "总量",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: "视频广告",
          type: "line",
          stack: "总量",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: "直接访问",
          type: "line",
          stack: "总量",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: "搜索引擎",
          type: "line",
          stack: "总量",
          label: {
            show: true,
            position: "top",
          },
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
      ],
    };

    option && myChart.setOption(option);
  },
  beforeDestroy() {},
  watch: {},
  computed: {},
  filters: {},
};
</script>

<style scoped lang='scss'>
.app{
  margin-top: 16px;
}
</style>

参考页面