echarts基础

定义

基于javascript的图表插件(canvas)
由百度开发 捐赠给apache基金会开源

hellworld

01导入js

<script src="./js/echarts.min.js"></script>

02 初始化

 var echart = echarts.init(dom节点,主题)

03 定义选项

var option = {}

04 更新选项

echart.setOption(option)

option选项

title-----标题

text文本
left对齐

legend

data:[图例]--------图例和seriesname保持一致

tooltip-----鼠标经过提示

trigger触发条件
item元素,axis轴线

xAxis------x轴

data:[
min:最小
max:最大
]

颜色改变默认

color:["#f30"] 调色盘

一图多表

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

label

show:是否显示
position:位置:left,right,insideLeft,outSideRight,center …

formater

{a}：系列名。{b}：数据名。{c}：数据值。
{d}:百分百

rich定义样式

big:{fontSize:48}
formatter:{big|被格式内容}

动态更新

更改option的值
通过setOption(option) 更新图片
使用setInterval间隔调用

事件触发

echart.dispatchAction({})
type:"showTip"
seriesIndex:系列下标
dataIndex:数据下标

动画

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

toolbox工具箱

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