echarts学习第一讲---基础认识

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的图标整体都是通过基本属性组合而成，下讲罗列常用图标的基本属性构造，方便直接查阅