网站建设费可以计入管理费用吗,怒江企业网站建设,企业网站建设一般原则,百度收录关键词查询目录
一.series系列
二.常见组件
1.标题title
2.图例legend
3.工具栏toolbox
4.提示框tooltip
5.坐标轴 xAxis yAsix
6.series系列 上一篇已经介绍了ECharts库的导入工作和绘制基本的图标#xff0c;今天我们来了解一下常用的组件#xff0c;如果对数据可视化感兴…目录
一.series系列
二.常见组件
1.标题title
2.图例legend
3.工具栏toolbox
4.提示框tooltip
5.坐标轴 xAxis yAsix
6.series系列 上一篇已经介绍了ECharts库的导入工作和绘制基本的图标今天我们来了解一下常用的组件如果对数据可视化感兴趣的麻烦点个关注内容会持续更新。 如果不清楚ECharts库的导入过程的可以参考ECharts导入 在介绍常用组件之前先了解一下series系列 一.series系列 我们知道数据的可视化包含了我们可以直接看见的图表还包含了数据而这些都包含series系列里一个series系列必须包含两个要素图表数值data和图表类型type有了这两个要素数据才可以表现出来
常见的图表类型
折线图line柱状图bar饼图pie散点图scatter关系图graph树图tree例如一个折线图表,type为line给定数据data
script typetext/javascript// 因为该demo会经常更该所以要销毁前一个图表echarts.init(document.getElementById(div)).dispose();//定义var myChart echarts.init(document.getElementById(div));var option{xAxis:{data:[jan,feb,mar,apr,may,jun,jul,aug,sep,oct,nov,dec]},yAxis:{},series:[{type:line,data:[43,62,56,91,23,5,12,31,38,97,86,57]}]}myChart.setOption(option);
/script 二.常见组件
1.标题title
主标题 title副标题 subtext位置 left主标题样式 textStyle副标题样式 subtextStyle可见性 show
例如在上面的例子中加入标题 2.图例legend 图例legend方便对数据的分辨它的data参数和series系列搭配使用 var option{legend:{data:[人数], //要和series的name对于},xAxis:{data:[jan,feb,mar,apr,may,jun,jul,aug,sep,oct,nov,dec]},yAxis:{},series:[{name:人数,type:line,data:[43,62,56,91,23,5,12,31,38,97,86,57]}]}
在数据上会多出legend图例 3.工具栏toolbox
保存图片 saveAslmage配置项还原 restore数据视图工具 dataView数据区域缩放 dataZoom动态类型切换 magicType
例如加上toolbox后
toolbox:{feature:{saveAsImage:{type:jpg},dataView:{},restore:{},dataZoom:{},magicType:{type:[line,bar,stack,titled]}}},
图表上会多出一些工具 4.提示框tooltip
提示触发方式trigger
item 图形触发主要在散点图饼图等无类目轴的图表中使用
axis 坐标轴触发主要在柱状图折线图等会使用类目轴的图表
none什么都不触发
例如在上面的例子中加入提示框 tooltip:{trigger:axis},
当鼠标触碰到图表坐标时会有提示信息 5.坐标轴 xAxis yAsix 坐标名称 name类名数据 data
y轴的分割设置
splitNUmber 分割段数interval 坐标分割间隔minlnterval 坐标轴最小间隔maxlnterval 坐标轴最大间隔6.series系列 类型 type类名名 name数据data标记点 markPoint
markPoint{ data[
{type:min},{type:max},{value:value,coord:[x,y]} //coord 坐标
]
}
标记线 markLine
markLine{ data[
{type:min},{type:max},{value:value,coord:[x,y]} //coord 坐标
]
} 全例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
script srcechart.js/scriptstyle/style
/head
body
div styleheight: 500px;width: 600px iddiv/div
script typetext/javascript// 因为该demo会经常更该所以要销毁前一个图表echarts.init(document.getElementById(div)).dispose();//定义var myChart echarts.init(document.getElementById(div));var option{legend:{data:[人数], //要和series的name对于},title:{text:主标题,subtext:副标题,textStyle:{color:blue,fontSize:20},subtextStyle:{color: red,fontSize: 10}},toolbox:{feature:{saveAsImage:{type:jpg},dataView:{},restore:{},dataZoom:{},magicType:{type:[line,bar,stack,titled]}}},tooltip:{trigger:axis},xAxis:{data:[jan,feb,mar,apr,may,jun,jul,aug,sep,oct,nov,dec]},yAxis:{},series:[{name:人数,type:bar,data:[43,62,56,91,23,5,12,31,38,97,86,57],markPoint:{data:[{type:min},{type: max},{coord:[0,70],value:70},]},// markLine:{// date:[// {name:平均线,type:min},// ]// },}]}myChart.setOption(option);/script
/body
/html
