echarts基础

介绍

1.javascript的图标的库
2.百度捐给apache基金会
3.比较符合中国人习惯
官网：https://echarts.apache.org/zh/index.html

核心概览

instance 实例

series 系列

tooltip 提示

legend 图例

xAxis x轴

yAxis y轴

toolbox 工具箱

dataZoom 缩放

vitualMap 虚拟映射

图表常用类型

bar 柱状

pie 饼形

radius：["60%,“40%”],

line 线性

areaStyle 面
smooth：true 平滑

颜色的修改

主题：自定义主题 light，dark 浅色于深色
自定义主题：https://echarts.apache.org/zh/theme-builder.html
color: 调色盘
color系列调色盘
itemStyle nprmal 默认 emphasis 强调状态

特别样式

渐变

var liner = {
				type: 'linear',
				x: 0,
				y: 0,
				x2: 0,
				y2: 1,
				colorStops: [{
					offset: 0,
					color: 'aqua' // 0% 处的颜色
				}, {
					offset: 1,
					color: 'rgba(10, 50, 128, 1)' // 100% 处的颜色
				}],
				global: false // 缺省为 false
			}

线的样式

lineStyle{
          width:12,
          cap:"round",
          opactiy:0.7,
}

面的样式

areaStyle:{
           color:liner2
}

数据的堆叠

stack:true

label标签

show:true//是否显示

//格式化
formatter:"
{a}{b}{c}
"
//a 代表数据名
//b 系列名
//c 数字

position：位置
insideRight 内部右侧
top/left/right/bottom/inside
color 颜色

多图表

grid 网格布局

top/left/right/bottom
height
width

xAxis yAxis 轴线指定

gridIndex:0,
gridIndex:1

series 数据指定轴线

xAxisIndex：0
yAxisIndex：0

工具箱

toolbox:{
					show: true,
					    feature: {
					      dataZoom: {
					        yAxisIndex: 'none'
					      },
					      dataView: { readOnly: false },
					      magicType: { type: ['line', 'bar'] },
					      restore: {},
					      saveAsImage: {}
					    }
				},

动画

animationEasing:“bouncelnOut”,
动画缓动函数
animationDelay(index)
动画延迟
animationDuration(index)
动画时间

事件监听

echart.on("click")
click,mouseover,mouseout,dblclick

事件发送

dispatchAction({
//显示提示
type:"showTip"，
//系列数据第0个
seriesIndex:0,
// data数据第3
datalndex:index,position:"top"})

富文本

//格式 b数据名,d百分比
formatter:"{ bfbl{d}Hmin[%]}\n{b}"，
rich:{
bfb:{css样式}
min:{css样式}
}

地图

mapType:"china"
type:"map"
echarts.regiterMap("china",json数据)
series[0].data=[{name:"河南";value:xxx},
{name:"郑州市";value:xxx}
]

虚拟映射

定义:通过数值来映射不同颜色

type:“continuous” 连续
calculable:true 动态计算
min:10 最小
max: 100 最大
color:[] 颜色
show:false 是否显示控制条

type:“piecewise” 分段类型
pieces: []
min:1,max:20,color:"#eee",symbol:“circle”
最小，最大，颜色，符号