对echarts的定义
- javascrit的图表库
- 百度捐给apache基金会
- 比较符合中国人的制表习惯
- HeightCharts,D3为同行
核心概念
- instance 实例
- series 系列
- tooltip 提示
- legend 图裂
- xAxis X轴
- yAxis Y轴
- toolbox 工具箱
- dataZoom 缩放
- vitualMap 虚拟映射
图标的常用类型
bar 柱状
pie 饼形
radius:[“60%”,“40%”]
line 线性
areaStyle 面
smooth:true 平滑
颜色的修改
主题:自定义主题 light,dark 浅色与深色
自定义主题
color:调色盘
color系列调色盘
itemStyle normal默认 emphasis强调状态
特别样式
- 渐变
var linear={
type:'linear',
x:0,
y:0,
x2:0,
y2:1,
colorStops:[{
offset:0,
color:'#0bdcf3'
//0%处的颜色
},{
offset:1,color:'#0093dd'
//100%处的颜色
}],
global:false//缺省为false
}
- 线的样式lineStyle
lineStyle:{
width:12,
cap:"round",
opacity:0.7,
}
3.面的样式
areaStyle:{
color:linear2,
}
数据的堆叠
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"