学习文档：
https://blog.csdn.net/weixin_43883917/article/details/113886713
https://www.runoob.com/echarts/echarts-tutorial.html
1.使用CDN引入：
Staticfile CDN（国内）：
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
jsDelivr:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
cdnjs:
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js"></script>
2.NPM方法（npm 版本需要大于 3.0）：
# 查看版本
$ npm -v
#升级 npm
cnpm install npm -g
# 升级或安装 cnpm
npm install cnpm -g
# 最新稳定版
$ cnpm install echarts --save
安装完成后 ECharts 和 zrender 会放在 node_modules 目录下，我们可以直接在项目代码中使用 require('echarts') 来使用
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
var echarts = require('echarts');
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
title: { ---标题
text: 'ECharts 入门示例'
},
tooltip: {}, ---提示信息
xAxis: { ---X轴显示项
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {}, ---Y轴显示项
series: [{ ---系列列表
name: '销量', // 系列名称
type: 'bar', // 系列图表类型
data: [5, 20, 36, 10, 10, 20] // 系列中的数据内容
}]
});
每个系列通过 type 决定自己的图表类型：
type: 'bar'：柱状/条形图
type: 'line'：折线/面积图
type: 'pie'：饼图
type: 'scatter'：散点（气泡）图
type: 'effectScatter'：带有涟漪特效动画的散点（气泡）
type: 'radar'：雷达图
type: 'tree'：树型图
type: 'treemap'：树型图
type: 'sunburst'：旭日图
type: 'boxplot'：箱形图
type: 'candlestick'：K线图
type: 'heatmap'：热力图
type: 'map'：地图
type: 'parallel'：平行坐标系的系列
type: 'lines'：线图
type: 'graph'：关系图
type: 'sankey'：桑基图
type: 'funnel'：漏斗图
type: 'gauge'：仪表盘
type: 'pictorialBar'：象形柱图
type: 'themeRiver'：主题河流
type: 'custom'：自定义系列
饼图：
option = {
// 全局调色盘。
color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
series : [
{
// 此系列自己的调色盘。
color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
name: '访问来源',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:335, name:'直接访问'},
{value:400, name:'搜索引擎'}
],
roseType: 'angle', ---南丁格尔图
itemStyle: { ---itemStyle 参数可以设置诸如阴影、透明度、颜色、边框颜色、边框宽度等
normal: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
// 高亮样式。
emphasis: {
itemStyle: {
// 高亮时点的颜色
color: 'red' ---鼠标移动到该模块时该模块的颜色
},
label: {
show: true,
// 高亮时标签的文字
formatter: '高亮时显示的标签内容'
}
},
}]
};
样式设置：
主题
var chart = echarts.init(dom, 'light'); ---背景白色
或者
var chart = echarts.init(dom, 'dark'); ---背景黑色
异步加载
ECharts 通常数据设置在 setOption 中，如果我们需要异步加载数据，可以配合 jQuery等工具，在异步获取数据后通过 setOption 填入数据和配置项就行
echarts_test_data.json 数据：
{
"data_pie" : [
{"value":235, "name":"视频广告"},
{"value":274, "name":"联盟广告"},
{"value":310, "name":"邮件营销"},
{"value":335, "name":"直接访问"},
{"value":400, "name":"搜索引擎"}
]
}
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading(); // 开启 loading 效果（异步加载需要一段时间，数据加载完成后再调用 hideLoading 方法隐藏加载动画）
$.get('https://www.runoob.com/static/js/echarts_test_data.json', function (data) {
myChart.hideLoading(); // 隐藏 loading 效果
myChart.setOption({
series : [
{
name: '访问来源',
type: 'pie', // 设置图表类型为饼图
radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
data:data.data_pie
}]
})
}, 'json')
交互组件：
dataZoom 组件可以实现通过鼠标滚轮滚动，放大缩小图表的功能
（默认情况下 dataZoom 控制 x 轴，即对 x 轴进行数据窗口缩放和数据窗口平移操作）
通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 来指定 dataZoom 控制哪个或哪些数轴
dataZoom: [
{
type: 'slider',
show: true,
xAxisIndex: [0],
start: 1,
end: 35
},
{
type: 'slider',
show: true,
yAxisIndex: [0],
left: '93%',
start: 29,
end: 36
},
数据的视觉映射
visualMap 组件中可以使用的视觉元素有：
图形类别（symbol）
图形大小（symbolSize）
颜色（color）
透明度（opacity）
颜色透明度（colorAlpha）
颜色明暗度（colorLightness）
颜色饱和度（colorSaturation）
色调（colorHue）
visualMap 组件定义了把数据的指定维度映射到对应的视觉元素上。
visualMap 组件可以定义多个，从而可以同时对数据中的多个维度进行视觉映射。
visualMap 组件可以定义为 分段型（visualMapPiecewise） 或 连续型（visualMapContinuous），通过 type 来区分
分段型视觉映射组件，有三种模式：
连续型数据平均分段: 依据 visualMap-piecewise.splitNumber 来自动平均分割成若干块。
连续型数据自定义分段: 依据 visualMap-piecewise.pieces 来定义每块范围。
离散数据根据类别分段: 类别定义在 visualMap-piecewise.categories 中。
option = {
visualMap: [
{
type: 'piecewise'
min: 0,
max: 5000,
dimension: 3, // series.data 的第四个维度（即 value[3]）被映射
seriesIndex: 4, // 对第四个系列进行映射。
inRange: { // 选中范围中的视觉配置
color: ['blue', '#121122', 'red'], // 定义了图形颜色映射的颜色列表，
// 数据最小值映射到'blue'上，
// 最大值映射到'red'上，
// 其余自动线性计算。
symbolSize: [30, 100] // 定义了图形尺寸的映射范围，
// 数据最小值映射到30上，
// 最大值映射到100上，
// 其余自动线性计算。
},
outOfRange: { // 选中范围外的视觉配置
symbolSize: [30, 100]
}
},
...
]
};
标签：name,type,value,ECharts,---,可视化,data,数据,echarts From： https://www.cnblogs.com/xinyu-yudian/p/16768770.html