Echarts教程篇
echarts引入
通过
配置语法
第一、创建html,即通过script标签引入
第二、需要准备一个高宽的DOM容器,存放图表
使用div,设置style中高宽
第三,设置配置信息,即初始化和加载option选项
分开写:如mycharts = echarts.init(document.getElementById(“main”);
mycharts.setOption(option);
option中的变量配置
title图表标题
tooltip提示信息
legend 图例组件
xAxis x轴要显示的项
yAxis y轴要显示的项
series 系列列表,确定图表的类型和相关数据信息
样式设置
改变文字的颜色,明暗,大小等
颜色主题:初始化时设置
var myChart = echarts.init(dom, ‘wonderland’);其中wonderland就是主题名称
调色板:在option中设置,
直接的样式设置:itemStyle,lineStyle,areaStyle,label等
高亮:emphasis,
数据加载
数据通常设置在setOption中,也可以使用异步加载
echarts的数据是以json形式展示,配合jquery,如
$.get(‘https://www.runoob.com/static/js/echarts_test_data.json’,function(data)){
mycharts.setOption({
})
},‘json’)
案例:https://www.runoob.com/try/try.php?filename=tryecharts_pie1_get_json_dynamic
echarts使用dataset管理数据
dataset组件用于单独的数据集声明,数据可以单独管理,被多个组件复用,
案例:https://www.runoob.com/try/try.php?filename=tryecharts_dataset1
数据到图形的映射
series.seriesLayoutBy:row/column 默认是按列映射,还以使用series.encode属性将对应的数据映射到坐标轴
使用visualMap进行视觉通道的映射
symbol,symbolSize,color,colorAlpha,opacity,等
案例:https://www.runoob.com/try/try.php?filename=tryecharts_dataset6
交互联动,共享一个dataset
案例:
https://www.runoob.com/try/try.php?filename=tryecharts_dataset7
交互组件:
legend,title,visualMap,dataZoom,timeline
案例1:https://www.runoob.com/try/try.php?filename=tryecharts_interaction1
响应式
绝对值和百分比定位,使用left,right,width,center,radius,horizontal,vertical
案例:https://www.runoob.com/try/try.php?filename=tryecharts_mq1
https://www.runoob.com/try/try.php?filename=tryecharts_mq2 (这个案例是动态的media query实例)
数据可视化简单来讲就是将数据用图表的形式来展示,专业的表达方式就是数据到视觉元素的映射过程
visualMap 组件可以定义为 分段型(visualMapPiecewise) 或 连续型(visualMapContinuous),通过 type 来区分
案例:https://www.runoob.com/try/try.php?filename=tryecharts_visualmap (显示全国个地方的空气质量)
事件处理:
通过on方法监听用户的行为,如监控用户的点击行为
myChart.on(‘click’, function (params) {
// 在用户点击后控制台打印数据的名称
console.log(params);
});
echarts的图标整体都是通过基本属性组合而成,下讲罗列常用图标的基本属性构造,方便直接查阅