Echarts基础

Echarts

步骤

1. 初始化
   var echart = echarts.init(dom节点,主题)

   1. 定义选项option

       var option = {
     title标题
     legend图例
     color调试版本
     tooltip提示
     xAxis轴线X
     yAxis轴线Y
     series系列数据
     }
   

2. 更新选项
   echart.setOption(option)

选项

1. 标题title
   text文本

2. 图例legend
   {data:["name1","name2"]}

3. 提示tooltip
   name: "问答题"

4. X轴线
   {data:["x1","x2",...]}

5. Y轴线
   {data:["y1","y2",...]}

6. 系列数据
   bar { name:'名称', type:'bar', }

 line
    {
name:'名称',
type:'bar',
smooth:'true',
areaStyle:'面的样式',
}

 pie
    {
name:'名称',
type:'bar',
radius:['10%','50%'],
data:[{name:'n1',value:40},{namr:'n2',value:50}],
left
top
}

label标签
show：true是否显示
position：”insideRight“位置
formatter格式
formatter: “{a}\n{c}分”
{a}系列名，{b}数据名 ，{c}数值，{d}百分百，

图表的类型

柱状图

type: "bar"

线形图

type: "line"

平滑线形图

type: "line"
smooth: true

面型图

type: "line"
areaStyle:{color: 'pink'}

饼形图

type: "pie"

颜色样式的控制

主题

light亮色

dark暗色

自定义主题

var echart = echarts.init(document.getElementById("container"),"purple-passion");

调色板

color:["#516b91","#c24fa1","#5af421","#824d11","#bac291","#51a291","#6b4f91","#542211",],

 itemStyle
    具体数据
        data:[{value:50,itemStyle:样式}]
    系列数据
        {name:"分析表",data:[],itemStyle:{}}
    normal:{正常样式}
    emphasis:{强调样式}
	

动画

动画延迟
动画时长
动画缓动函数：animationEasing:"bounceInOut"
    弹性布局

时间的监听
    echart.on（”事件名“，处理函数）

发送事件dispatchAction