Echarts
步骤
-
初始化
var echart = echarts.init(dom节点,主题)
- 定义选项option
var option = { title标题 legend图例 color调试版本 tooltip提示 xAxis轴线X yAxis轴线Y series系列数据 }
-
更新选项
echart.setOption(option)
选项
-
标题title
text文本
-
图例legend
{data:["name1","name2"]}
-
提示tooltip
name: "问答题"
-
X轴线
{data:["x1","x2",...]}
-
Y轴线
{data:["y1","y2",...]}
-
系列数据
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
标签:bar,name,data,基础,line,type,Echarts,echart
From: https://www.cnblogs.com/aureazjl/p/16833767.html