【ECharts使用方法的总结】

一、什么是ECharts？

1、ECharts 是一个基于 JavaScript 的开源可视化图表库，涵盖各行业图表，满足各种需求。
2、ECharts 兼容当前绝大部分浏览器（比如：IE8/9/10/11，Chrome等）及兼容多种设备，可随时随地任性展示

ECharts的官方地址

对ECharts全面的解说教程的地址

二、在项目中使用ECharts的方法

以下案例是本博主在Vue项目中的进行使用的方法如下
第一步、需要先下载 ECharts 命令如下

cnpm install echarts --save

在vue项目以下图是说明 你安装 echarts 的位置，以及版本号的大小

第二步： 首先需要为ECharts准备一个具备大小（宽高）的Dom(div)

<div id="main" style="width: 600px;height:400px;"></div>

第三步：在 ECharts 的官网 需要哪个图表 就复制图表里边的代码

参考以下案例

• 复制好的代码 需要 mounted 里边进行获取dom

<template>
  <div>
    <div id="main" style="width: 750px; height: 500px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {},
  data() {
    return {};
  },
  components: {},
  created() {},
  mounted() {
  

    var chartDom = document.getElementById("main");   //获取上面定义好的 div

    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: "Referer of a Website",
        subtext: "Fake Data",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: "50%",
          data: [
            { value: 1048, name: "Search Engine" },
            { value: 735, name: "Direct" },
            { value: 580, name: "Email" },
            { value: 484, name: "Union Ads" },
            { value: 300, name: "Video Ads" },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };

    option && myChart.setOption(option);



  },
  methods: {},
  watch: {},
  computed: {},
};
</script>

<style scoped lang="scss">
</style>

效果图如下：