echarts入门

一，echarts简介

学习一个东西的话前提肯定是你知道它是干什么的，能不能解决你的需求。毕竟都是面向需求编程的嘛。回归正题，
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。优点等等进入官网你就可以看到，可多了
个人认为，echarts可以将数据可视化，当你要把数据用图表展示出来，echarts可以帮你，基本上你能想到的例子这里都有。

多的不说了，开始稍微入门echarts吧

二，初步运行echarts

1.获取 Apache ECharts

推荐npm在项目主目录下

npm install echarts --save

2.在项目中引入 Apache ECharts

接下来就是要在自己的页面下面显示ecarts图表了
在main.js文件中

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

然后就可以在自己的页面中使用echarts，这里我用的是饼图展示

 <div
      id="callOutChart"
      class="callOutChart"
      :style="{
        height: '500px',
        width: '1440px',
        boxShadow: '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .4)',
      }"
    ></div>
    
 mounted() {
    this.drawLine();
  },
drawLine() {
      // 基于准备好的dom，初始化echarts实例

      let callOutChart = this.$echarts.init(
        document.getElementById("callOutChart")
      );
      // 绘制图表

      callOutChart.setOption({
        //标题
        title: {
          text: "呼出",
          left: "16",
          top: "16",
        },
        //背景色
        backgroundColor: "#fff",
        //提示框组件
        tooltip: {
          trigger: "item",
          formatter: "{b}:  ({d}%)",
          backgroundColor: "#fff",
          textStyle: {
            color: "black",
          },
          // extraCssText: "box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);",
        },
        //数据集
        dataset: {
          source: [
            // ["product","正常状态","无法接通","号码错误","拒绝接听","无人接听","家属接听","患方不合作","其他"]
            ["随访", 548],
            ["复诊", 35],
          ],
        },
        //图例组件
        legend: {
          bottom: 8,
          left: "center",
          itemWidth: 10,
          itemHeight: 10,
          itemStyle: {
            borderCap: "round",
          },
          icon: "circle",
        },
        //系列
        series: [
          {
            type: "pie",
            radius: ["40%", "60%"],
            label: {
              formatter: "{b}:  ({d}%)",
            },
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            color: ["#3AA1FF", "#36CBCB"],
          },
        ],
      })
    },

效果展示：

这样一个简单的echarts饼图就出现了的

三，二次开发

往往这个简单的图表可能无法满足我们的需求，免不了要二次开发，但是想想自己刚画了个echarts图表例子出来，离二次开发还是有点距离的，说说我的开发经验吧

1.官方文档概念篇

官方文档概念篇你一定要花点时间去看，慢慢一个个看，不是非要全部吃透，看完你能明白数据集，数据转换等就行了暂时。看完这个，你对echarts就会有了初步的理解。

2.官方文档应用篇

官方文档应用篇可以借鉴，选择你的需求把基本简单的echarts架构搭建出来，当然echarts示例中的例子也可以。个人建议从简单的例子开始进行开发。可以用折线图举个例子，官网上的例子：

确实很简洁哈，第一次接触新东西就是要自己开发嘛，先来看下我开发后的效果：

还行吧

3.官方文档配置项

前面那些可能还只是战术前准备，现在才开始的就是真正实战了的，要想实现自己的需求官方文档配置项必不可少的。

通过配置项，你要能知道legend,tooltip,xAris,yAris等等常用的属性是配置什么的，这里可以一步步根据自己的需求有目的性的进行配置。例如实现鼠标移到对应数据点时要显示提示信息的话，你会发现要用到的是tooltip这个属性

   //提示框组件
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "line" },
          // trigger: "item",
          formatter: "{b}<br/>{a}:  ({c}%)",
          backgroundColor: "#fff",
          textStyle: {
            color: "black",
          },
          extraCssText: "box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);",
        },

你会发现这些属性一般你都会用到的。到这里，数据的基本展示应该是没有问题的了

4.度娘

实在有不懂的不会的需求一下没有思路，万事找度娘嘛。

加油