Echarts自学

Echarts

一.定义

1. 基于JavaScript的图表插件(canvas)
   百度开发
   apche基金会开源
2. 竞争
   D3
   heightCharts(svg)

二.Hallo World

1.导入JavaScript

// 要先去Echarts官网下载js
<script src="./js/echarts.min.js"></script>

2.初始化

var echart = echarts.init(document.getElement

3.自定义选项

var option ={}

4.更新选项

echart.setOption(option);

三.定义选项

title标题

//text 文本
//left 对齐方式
//分为left.center.right
// 例:
title:{text:"2020新冠肺炎趋势"},

legend

//data:[图例]
//图例和seriesname保持一致
// 例:
legend:{data:["累计确诊"]},

x轴

//xAxis
//x轴
//min:最小
//max:最大
//data:[]
xAxis:{data:list.map(item=>String(item.day).slice(-4))},

y轴

// yAxis
// y轴
yAxis:{data:list.map(item=>String(item.day).slice(-4))},

series系列数据

// bar 条
// line 线
// pie 饼状图
series:[
		{name:"累计确诊",type:"bar",data:list.map(item=>item.rest_sure_cnt)}
	]

tooltip

1. 属性为鼠标经过

四.颜色改变

//主题:默认light,dark,自定义
var echart = echarts.init(document.getElementById("app")."定义的主题")
// color
color:["#f30] //调色盘
//
itemStyle: //normal 正常 emphasis 强调
data:[15,{value:20,itemStyle:{}}]
//visulMap虚拟映射

五.形状

// bar柱状图
itemStyle:{
borderRadius:[左上,右上,右下,左下]
//color颜色可以半透明也可以渐变
}
//line折线图
//smooth:true
//平滑
//areaStyle:面的样式
//lineStyle线的样式
//pie饼状图
radius:{外径,内径}
//left水平偏移
//top垂直偏移
itemStyle:{
//定义每个扇形的颜色
}

六.堆叠

yAxis:{data:[2019.2020.2021]}
{name:"新增",data:[10,20,30],stack:true}
{name:"流失",data:[10,20,30],stack:true}

七.一图多表

grid:[
{left,top,width,height}
]
xAxis[
gridIndex:0
gridIndex:1
]
yAxis[
gridIndex:0
gridIndex:0
]
series:{
name:"xxx
xAxisIndex:1
yAxisIndex:1
}

八.label

show:是否显示
position:位置 left,right,insideLeft,outSideRight.
// formater
{a}:数据名
{b}系列名
{c}数据值
{d}:百分比
//样式
rich:定义样式 big|{fontsize48}
formatter({big|被格式化的内容})

九.动态更新

1. 更改option的值
2. 通过setOption(option)更新图标
3. 使用setInterval间隔调用

十.事件监听

1. echarts.on(事件名 function(e){})
2. echasts.off()移出事件监听

十一.事件触发

echarts.dispatchAction()
//
type:"showTip'
seriesIndex:系列下标
dataIndex数据下标

十二.动画

animationEasing
//过度动画
animationDelay:function(idx){returtn idx*100}
//动画延迟
animationDuration:function(idx){returtn idx*100}
//动画时长

十三.工具箱

toolbox: {
				    show: true,// 显示工具箱
				    feature: {// 特行
				      dataZoom: { // 缩放轴线
				        yAxisIndex: 'none'
				      },
				      dataView: { readOnly: false }, // 编辑数据
				      magicType: { type: ['line', 'bar'] }, // 魔法类型:线,柱状互转
				      restore: {},// 重置
				      saveAsImage: {} // 保存图片
				  }
		  }

十四.地图

特点:series:
数组[{
 {name:"河南",value:"200",en:"henan"},
}]
echats.registerMap("china",chainJson)
option.series[0].mapType = obj.en; 
echart.setOption(option);

总结

以上内容在Echarts官网Api文档都有,这里只有一点,大家可以去官网里面查看更多内容!