Echart安装:
https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js
(安装完成后 ECharts 和 zrender 会放在 node_modules 目录下,
我们可以直接在项目代码中使用 require('echarts') 来使用。)
配置手册:
https://www.echartsjs.com/zh/option.html
基本概念:
ECharts Documentation https://www.echartsjs.com/zh/tutorial.html#ECharts%20%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5%E6%A6%82%E8%A7%88
ECharts 配置语法:
第一步:创建 HTML 页面,引入 echarts.min.js。
第二步: 为 ECharts 准备一个具备高宽的 DOM 容器。
id 为 main 的 div 用于包含 ECharts 绘制的图表
第三步: 设置配置信息。
ECharts 库使用 json 格式来配置。
echarts.init(document.getElementById('main')).setOption(option);
这里 option 表示使用 json 数据格式的配置来绘制图表。
var option = { 以下内容 }
为图表配置【标题】和副标题:
title: {
text: '第一个 ECharts 实例',
subtext: '纯属虚构'
}
以下是图例组件:
展现不同系列的标记(symbol)(颜色和名字)。可以通过点击图例控制哪些系列不显示。组件在系列之上,echarts 中各种内容,被抽象为“组件”。
如,echarts 中至少有这些组件:xAxis(直角坐标系 X 轴)、yAxis(直角坐标系 Y 轴)、grid(直角坐标系底板)、 angleAxis(极坐标系角度轴)、radiusAxis(极坐标系半径轴)、polar(极坐标系底板)、geo(地理坐标系)、 dataZoom(数据区缩放组件)、visualMap(视觉映射组件)、tooltip(提示框组件)、toolbox(工具栏组件)、series(系列)、...
其实系列(series)也是一种组件,可以理解为:系列是专门绘制“图”的组件。
配置提示信息
:https://www.echartsjs.com/zh/option.html#polar.tooltip.formatter
tooltip: {
show:true,
trigger:'axis',
//坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
confine: true,
// 是否将 tooltip 框限制在图表的区域内。
enterable: true,
//鼠标是否可进入提示框浮层中,默认false,如需详情内交互、添加链接,按钮,可设置为 true。
triggerOn: 'click',
//triggerOn:默认为hover,将tooltip的Hover事件改为点击事件可设置为click.
formatter: function (params, ticket, callback) {
// 数据集 异步回调标识 异步回调
var tipString = params[0].axisValue + "<br />";
var key = "value";
// 排序
params.sort(function (obj1, obj2) {
var val1 = obj1[key];
var val2 = obj2[key];
if (val1 < val2) {
return 1;
} else if (val1 > val2) {
return -1;
} else {
return 0;
}
})
var indexColor;
for (var i = 0, length = params.length; i < length; i++) {
indexColor = params[i].color;
tipString += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background:' + indexColor + '"></span>';
tipString += '<span data-type ="lineTip" data-val=' + params[i].value + '>' + params[i].seriesName + ':' + params[i].value + '</span><br />';
}
return tipString;
}
},
关于Echarts中formatter实现动态数据的方法_JavaScript_kirinlau的专栏-CSDN博客 https://blog.csdn.net/kirinlau/article/details/78732329
图例
//图例
legend: {
data: [{
//名字不是随便起的。
name: '系列1',
// 强制设置图形为圆。
icon: 'circle',
// 设置图例文本颜色(这里不是折线颜色)
textStyle: {
color: 'red'
}
}]
}
X 轴:
直角坐标系中横轴数组,数组中每一项代表一条横轴坐标轴,仅有一条时可省略数值 。
横轴通常为类目型,但条形图时则横轴为数值型,散点图时则横纵均为数值型 。
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
Y 轴:
直角坐标系中纵轴数组,数组中每一项代表一条纵轴坐标轴,仅有一条时可省略数值 。
纵轴通常为数值型,但条形图时则纵轴为类目型。
yAxis: {}
系列列表:
series是一个对象嵌套的结构;对象内包含对象 。下面的例子有“蒸发量”和“降水量”两个系列名称。
折线图颜色设置见:https://blog.csdn.net/bellediao/article/details/106331542
series: [
{
//系列名称,如果启用legend,该值将被legend.data索引相关
name: '蒸发量',
//图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示。
type: 'bar',
//系列中的数据内容数组,折线图以及柱状图时数组长度等于所使用类目轴文本标签数组axis.data的长度,并且他们间是一一对应的。数组项通常为数值
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
//系列中的数据标注内容
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }