echarts基础

步骤总结

• 01 导入js

<script src="./js/01基础/echarts.min.js"></script>

• 02 初始化

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

• 03 定义选项

var option = {};

• 04 更新选项

echarts.setOption(option);

option选项

var option = {
	title: {//标题 text：文本；对齐方式：left、center、right},
	legend:{data:[];}, //图例
	tooltip:{}, //鼠标提示
	xAxis:{}, //x轴
	yAxis:{}, //y轴
}

颜色改变

• 主题
  默认
  light
  dark
  自定义

 color:["#f30"] 调色盘
 itemStyle: //normal正常；emphasis强调
 data:[15,{value:20,itemStyle:{}}]

bar柱状图

itemStyle:{
    borderRadius:[左上,右上,右下,左下]
    //color颜色可以半透明也可以渐变  
}

line折线图

smooth:true //平滑
areaStyle: //半透明,渐变 //面的样式
lineStyle: //线的样式
cap:"round" //端点平滑
width:20, //粗细

pie饼行图

radius:[外径,内径]
left: //水平偏移
top: //垂直偏移
itemStyle: //每个扇形样式

stack堆叠

yAxios:{data:[2019,2020,2011]},
{name:"新增",data:[10,20,30],stack:true}
{name:"流失",data:[7,5,8],stack:true}

一图多表

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间隔调用