Echarts学习精华的提炼

grid系列之刻度线：

xAxis系列参数：

折线图

legend系列之改变位置：

yAxis系列之splitLine：

color图表中的折线线条颜色：

雷达图

radar系列之splitLine、splitArea、axisLine

series系列之symbol、symbolSize、itemStyle、areaeStyle

饼图之环形图

series系列之startAngle、hoverOffset

中国地图

总结

---

前言

==

Echarts的出现是由于市场上的需求，应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。

Echarts的可视化效果就是引入了各类图表的绘制，以及高级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图 …所以这一章节主要是从实际开发过的项目来进行学习。

先来展示一下对于这个知识的**“立可得”智能看板应用案例**：

其实这个案例的制作整体不是太难，主要是让我们掌握如何应用Echarts来将数据可视化。

这个案例里面引入了5中图表和1张地图的，我就从这些图表的基础配置来介绍Echarts的应用方法

Echarts使用步骤

===========

• 下载echarts GitHub - apache/echarts at 4.5.0

• 引入echarts “dist/echarts.min.js”

• 准备一个具备大小的DOM容器（盒子）来存放图表

• 初始化echarts实例对象

• 指定配置项和数据(option)

var myChart = echarts.init(document.getElementById(‘box’));

• 将配置项设置给echarts实例对象

myChart.setOption(option);

• 如果想让图表能跟着页面的大小而改变自适应可以写：

window.addEventListener(“resize”, function() {

myChart.resize();

});

使用步骤知道后，我们再来学习里面的基础配置！

点位图

===

插入本案例中的代码如下：

// (function(){})();立即执行函数

(function() {

// 1.实例化对象

var myChart = echarts.init(document.querySelector(“.pie”));

// 2.指定配置项和数据

var option = {

tooltip: {

trigger: ‘item’,

formatter: ‘{a}
{b} : {c} ({d}%)’

},

color: [‘#006cff’, ‘#60cda0’, ‘#ed8884’, ‘#ff9f7f’, ‘#0096ff’, ‘#9fe6b8’, ‘#32c5e9’, ‘#1d9dff’],

series: [

{

name: ‘Area Mode’,

type: ‘pie’,

radius: [‘10%’, ‘70%’],

// radius为百分比就是针对这个容器pie而言

center: [‘50%’, ‘50%’],

roseType: ‘radius’,

itemStyle: {

borderRadius: 5

},

data: [

{ value: 20, name: ‘云南’ },

{ value: 26, name: ‘北京’ },

{ value: 24, name: ‘山东’ },

{ value: 25, name: ‘河北’ },

{ value: 20, name: ‘江苏’ },

{ value: 25, name: ‘浙江’ },

{ value: 30, name: ‘四川’ },

{ value: 42, name: ‘湖北’ }

],

// label对象用于修饰图表中的字体

label: {

fontSize: 12,

},

// labelLine中注释的线

labelLine: {

length: 6,

length2: 8

}

}

],

};

// 3.配置项和数据给我们的实例化对象

myChart.setOption(option);

// 4.图标也可以自适应我们的屏幕

window.addEventListener(“resize”, function() {

myChart.resize();

});

})();

里面有些参数我来解释一下：

---