echarts基础了解与使用

echarts

介绍

作用：展示图表的（大数据可视化）

百度，捐赠给apache基金会，免费开源

竞品

heightCharts
D3

术语

网址：https://echarts.apache.org/zh/cheat-sheet.html

示例：

    title标题
    legend图例
    xAxis、yAxis轴线
    tooltip提示
    toolbox工具箱

图表常见类型

bar 柱状图

line折线图

	line 折线图
    smooth：true 曲线图
    areaStyle：“#f70” 面积图

pie 饼状图

    pie 饼状图
    radius：[80,50] 环形图

颜色

主题

    light
    dark
    自定义
     https://echarts.apache.org/zh/theme-builder.html

color

 调色盘
    option.color
        color:["#55aaf","#aff7f","#55007f",#fff00"],
    series.item.color

itemStyle

项的颜色
    itemStyle:{color:"#f30"}

itemStyle:{
normal:{color:"#93da6c"}//正常颜色
emphasis:{color:"#bcff57"}//强调颜色
}

特殊样式（查官网）

1.使用渐变

itenStyle:{
color:linear,//渐变颜色
borderRadius:[30,30,0,0]//圆角半径
}

2.定义渐变

 var linear = {
         
                   type: 'linear',
                  x: 0,
                   y: 0,
                   x2: 0,
                   y2:1,
                   colorStops: [{
                           offset: 0, color: '#02bcff' // 0% 处的颜色
 
                   }, {
                           offset: 1, color: '#5555ff' // 100% 处的颜色
 
                   }],
                   global: false // 缺省为 false
                 }

堆叠图

stack：true

label

标签

show：true
是否显示
position：”insideRight“
位置
formatter
 格式
    formatter:"{a}\n{c}分"
        {a}系列名
        {b}数据名
        {c}数值
        {d}百分百
rich富文本

formatter:"{big|{d}}{small|%}\n{b}",
	rich:{
		big:{
			color:"#f70",
			fontSize:"48px",
			fontWeight:900,
		},
		small:{
			color:"#f70",
		}
}

动态显示局部

定义option
修改option值
echart.setOption(option)；更新数据和视图

缓存动画

动画延迟

animationDelay:function(idx){
		//越往后的数据延迟越大
		return idx*200;
}

idx当前动画元素的下标

动画时长

animationDuration:function(idx){
		//每小格动画的时间
		return idx*200;
}

动画缓动函数

animationEasing:"bounceInOut"
弹性布局

事件的监听

echart.on(事件名，处理函数)
echart.on("mouseover",e=>{})

发送事件（dispatch）

echart.dispatchAction({
	type: 'showTip'//显示提示
	seriesIndex:0.//数据系列下标
	datalndex: ind,//数据下标.
	position:"top"//位置
})

echarts官网使用

网址https://echarts.apache.org/zh/index.html

入门实例https://echarts.apache.org/handbook/zh/get-started/

类的方法

先找到文档，再点击API进行查找

实例方法

先找到文档，再点击API进行查找，再在echarts中找自己需要的实例；
比如setOption...(设置选项)，on...(注册事件)

动作与事件

在文档→教程查找;例如;action:{}动作，events:{}事件

选项配置：option如何修改

在文档→教程查找；在title:{}中查找所有的选项option的配置；
在series:[{}]中，可以根据不同的图表类型有不同的参数选项