Echarts基础详解

1. • 定义

百度出品的图表库    竞品 :D3.js HeightCharts.js

2. • 安装

1. npm i echart -S   

2. import * as echarts from "echarts"

3. <script src="xxx/echarts.js">

3. • 创建图表

1. 承载图标的div  <div id="#app" style="width:1200px";height:800px>

2. 创建实例    var  mychart =echarts.init(doucument.getElementById("app"))

3. 创建选项   var option = {

4. 更新选项   mychart.setOption(option)

4. • option

1. 标题   title  text 文本  left 文本对齐

2.调色板   color:[]

3. 背景色   backgroundColor:"" 

4.提示 tooltip

5.图例  legend   data:[]

6.xAxis   x轴线    data:[]

7.yAixs  y轴线   

8.系列 series   [系列1,系列2]  name名称  type:bar | line | pie  图表类型  

data数据   data:[60]    data:[{name:"",value:60}....]

5. • 颜色

1. 主题   dark,light  自定义

2. 配置调试板  option.color=[]

3. 配置背景颜色  option.backgroundColor  

4. 配置系列数据的颜色   option.series[index].color=[]

5. 配置系列数据的样式   option.series[index].itemStyle

6. 配置系列数据某一项的样式  option.series[index].data[ind].itemStyle

正常状态   normal:{color:""}   强调状态  emphasis:{color:""}

6. • label 标签

1. 是否显示  show

2. 显示的位置   position:"insideRight"//"out inside  ,left,right,top,bottom,center"

3. 颜色  color

4. 文字大小  font-size

5. 格式化  formatter    {a} 表名  {b}系列名  {c}数据名 {d} 百分比 (type:"pie")

6. 富文本 rich  small:(fontSize:12;color:#000)  formatter:"{small | 被样式small应用的文本}"