echarts入门

echarts入门

  • 一,echarts简介
  • 二,初步运行echarts
    • 1.获取 Apache ECharts
    • 2.在项目中引入 Apache ECharts
  • 三,二次开发
    • 1.官方文档概念篇
    • 2.官方文档应用篇
    • 3.官方文档配置项
    • 4.度娘

一,echarts简介

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

三,二次开发

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

1.官方文档概念篇

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

2.官方文档应用篇

官方文档应用篇可以借鉴,选择你的需求把基本简单的echarts架构搭建出来,当然echarts示例中的例子也可以。个人建议从简单的例子开始进行开发。可以用折线图举个例子,官网上的例子:
echarts入门_第3张图片
确实很简洁哈,第一次接触新东西就是要自己开发嘛,先来看下我开发后的效果:

还行吧

3.官方文档配置项

前面那些可能还只是战术前准备,现在才开始的就是真正实战了的,要想实现自己的需求官方文档配置项必不可少的。
echarts入门_第4张图片
通过配置项,你要能知道legend,tooltip,xAris,yAris等等常用的属性是配置什么的,这里可以一步步根据自己的需求有目的性的进行配置。例如实现鼠标移到对应数据点时要显示提示信息的话,你会发现要用到的是tooltip这个属性

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

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

4.度娘

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

加油

你可能感兴趣的:(echarts,echarts,javascript,vue.js)