可视化的主角——ECharts

努力赚钱养猫猫
412 阅读6分钟

大家好，我是 摸鱼小公举，懦弱的人只会裹足不前，莽撞的人只能引为烧身，只有真正勇敢的人才能所向披靡。上一篇文章是 关于antv/g2 常用的图表用法，今天我们一起来学习一下Echarts相关用法,在本文章我会以折线图,柱状图,饼图以及仪表盘来示例。

简介

ECharts是一个用了 JavaScript 实现的开源可视化库，可以很流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender。它有丰富的可视化类型提供了折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

这是Echarts属性配置项文档

安装方式

（1）从 CDN 获取，这是国外两个比较稳定的CDN。

jsDelivr：https://cdn.jsdelivr.net/npm/echarts@4.3.0/dist/echarts.min.js

cdnjs ：https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js

（2）从 npm 获取

npm install echarts --save

import * as echarts from 'echarts';

分组柱状图示例

（1）为 ECharts 准备一个定义了宽高的 DOM

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

（2）设置一个图表调用的函数，初始化一个myChar对象

firstChart(){
 var chartDom = document.getElementById("main");
 var myChart = echarts.init(chartDom);
 var option; // 图表参数配置
}

(3) 标题设置

option = {
  title: {//标题设置
    text: "中国城市人口",
    textStyle: {// 文字颜色
      fontSize: 18,
      fontWeight: "bolder",
      color: "#1e80ff"
    },
    x: "right"
  }
}

（4）提示框配置

option = {
 tooltip: {//提示框设置
  trigger: "axis",
  axisPointer: {//坐标轴指示器
    type: "shadow" //默认为直线，可选：`line/shadow`
  }
 },
}

（5）图例配置

option = {
  legend: {//图例设置
   // 图例显示还可以点击显示隐藏图表内容
   orient: "horizontal",
   // 布局方式，默认为水平布局，可选：`horizontal/vertical`
   x: "left" 
   // 水平安放位置，默认为全图居中，可选：`center/left/right`,填值`number`
  },
 }

（6）坐标系X轴和Y轴配置

这里的X轴和Y轴的数据是可以调换的，调换的效果就是横向显示图表

option = {
xAxis: {//坐标X轴设置
  type: "category",
  data: ["广东", "山东", "河南", "江西", "四川", "河北", "湖南", "浙江"]
       },
yAxis: {//坐标Y轴设置
  type: "value",
  boundaryGap: [0, 0.01]
       },
}

（7）数据源配置

option = {
 series: [
  {
    name: "2021",
    type: "bar", //设置是柱状图,折线图,饼图等类型样式
    data: [18203, 23489, 29034, 104970, 131744, 630230, 131744, 630230],
    itemStyle: { //设置柱状图背景色
      color: "#ffb800"
    }
  },
  {
    name: "2022",
    type: "bar", //还可以设置成
    data: [19325, 23438, 31000, 121594, 134141, 681807, 131744, 630230],
    itemStyle: {
      color: "#4cd1e0"
    }
  }
 ]
}

（8）使用刚指定的配置项和数据显示图表，并调用该函数。

option && myChart.setOption(option);

mounted() {
    this.firstChart();
},

（9）效果图如下

image.png

柱状图和折线图组合使用。

其实柱状图和折线图的配置大同小异，还是上面的配置，我就改一下数据源第二项的类型展示，把type:'bar',改成type:'line'，效果如下

image.png

饼图示例

（1）为 ECharts 准备一个定义了宽高的 DOM

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

（2）设置一个图表调用的函数，初始化一个myChar对象

secondChart(){
 var chartDom = document.getElementById("main1");
 var myChart = echarts.init(chartDom);
 var option; // 图表参数配置
}

（3）option相关配置如下

option = {
 title: { //标题配置
  text: "2022中国城市人口",
  subtext: "Fake Data",
  left: "center"
},
 tooltip: { //提示框配置
  trigger: "item"
},
legend: { //图例配置
  orient: "vertical",
  left: "left"
},

}

（4）数据源配置

饼图不需要坐标系X轴和Y轴的配置，所以这里直接到数据源这一步；

option = { 
series: [
  {
    name: "Access From",
    type: "pie",
    radius: [30,150], //设置饼图半径
    //number:半径值
    //string:例如 '20%'
    //Array.<number|string>  (掏空圆心半径，整体大圆半径)
    data: [
      { value: 1048, name: "广东" },
      { value: 735, name: "山东" },
      { value: 580, name: "河南" },
      { value: 484, name: "江西" },
      { value: 300, name: "四川" },
      { value: 580, name: "河北" },
      { value: 484, name: "湖南" },
      { value: 300, name: "浙江" }
    ],
    
    roseType: "radius",//默认值'area'
    //是否展示成南丁格尔图，通过半径区分数据大小。可选择：
    //'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
    //'area' 所有扇区圆心角相同，仅通过半径展现数据大小。
    
    emphasis: { //高亮状态的扇区和标签样式
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: "rgba(0, 0, 0, 0.5)"
      }
    }
  }
]
}

（5）使用刚指定的配置项和数据显示图表，并调用该函数

option && myChart.setOption(option);

mounted() {
    this.secondChart();
},

（6）效果图如下

image.png

仪表盘示例

仪表盘的配置项都在数据源里面了

（1）为 ECharts 准备一个定义了宽高的 DOM

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

（2）设置一个图表调用的函数，初始化一个myChar对象

thirdChart(){
 var chartDom = document.getElementById("main2");
 var myChart = echarts.init(chartDom);
 var option; // 图表参数配置
}

（3）数据源配置

由于这里不需要其他配置,所以直接到了数据源配置这一步

option = {
  series: [
    {
      type: "gauge", //仪表盘类型
      progress: { //展示当前进度。
        show: true, //是否显示进度条。
        width: 18
      },
      axisLine: { //仪表盘轴线相关配置。
        lineStyle: {
          width: 18
        }
      },
      axisTick: { //刻度样式。
        show: false  //是否显示刻度
      },
      splitLine: {  //分隔线样式
        length: 15, //分隔线线长。支持相对半径的百分比。
        lineStyle: {
          width: 2,
          color: "#999"
        }
      },
      axisLabel: {  //刻度标签。
        distance: 25,  //标签与刻度线的距离。
        color: "#999",
        fontSize: 20
      },
      anchor: { //表盘中指针的固定点。
        show: true,  
        showAbove: true, //固定点是否显示在指针上面。
        size: 25,   //固定点大小
        itemStyle: { //指针固定点样式。
          borderWidth: 10  //描边线宽。为 0 时无描边。
        }
      },
      title: {  //仪表盘标题。
        show: false
      },
      detail: { //仪表盘详情，用于显示数据。
        valueAnimation: true, //是否开启标签的数字动画。
        fontSize: 60,
        offsetCenter: [0, "70%"] 
        //仪表盘中心的偏移位置,[水平方向偏移,垂直方向偏移]
      },
      data: [
        {
          value: 70
        }
      ]
    }
  ]
};

（4）使用刚指定的配置项和数据显示图表，并调用该函数

option && myChart.setOption(option);

mounted() {
    this.thirdChart();
},

（5）效果图如下

image.png

总结Echarts与antv/g2区别

(1) 首先外形echarts的默认样式比较丑,而anvt/g2则样式比较美观

(2)安装的方式都支持CDN和npm两种方式。

(3)实现基础都基于Canvas；使用前都需要先在页面定义一个dom对象。

(4)echarts是以图表为主, 而anvt/g2则是以图形出。echarts是较成熟的一套图表库, 使用方便、图表种类多， 也是比较容易上手的, 有问题在网上的解决方法很多，而anvt/g2是以数据可视化底层引擎，以数据驱动，相对于echart更具有拓展性和灵活性。

(5)anvt/g2把图形配置数据采用对象进行定义，和需要呈现的数据进行了分离，而echarts的数据中二者是融为一体。

结语

好了文章到这就结束了，欢迎大家( 点赞+评论+关注 ) 有问题可以来互相交流一下；希望这篇文章对大家有用,也希望大家多多支持我。

avatar
文章
阅读
粉丝