初遇echarts
- 需求是驱动成长的第一要素(没有之一)
因业务需要,故随大流选择了echarts
至于为什么没有用hightcharts,英语差怪我咯(手动摊手
关于参考手册
在使用过程中,个人感觉e2文档比较靠谱,遇见有个别属性变更(不是很多)可以再看下e3的API,对于新手(比如我),需要自定义表格样式时,参考官方给出的图示说明,可以快速的找到对应的属性。
link: https://echarts.baidu.com/echarts2/doc/example/themeDesigner.html
点开【文档图示】即可查看全部图示,迅速找到属性(5s后会收起)
项目实践
要点一:axis 坐标轴个性化
#1 type 刻度尺的数据类型('category' | 'value' | 'time' | 'log')
#2 max min 设置刻度的最大值最小值
#3 axisTick 坐标轴的小标记
#4 formatter 格式化X-Y轴的label
formatter : 间隔名称格式器:{string}(Template) | {Function}
PS: formatter很强大,可返回任意内容,之后的tooltip中会体现到
#5 lineStyle控制分割线的样式,splitNumber改变分隔段数
要点二:折线样式
#1 name !!!!非常重要,对于多曲线图表来讲,这里的name需要和legend(后面会提到)中的name一一对应,否则数据无法对接
#2 type 可选参数:'line'(折线图) | 'bar'(柱状图) | 'scatter'(散点图) | 'k'(K线图) 'pie'(饼图) | 'radar'(雷达图) | 'chord'(和弦图) | 'force'(力导向布局图) | 'map'(地图)
#3 smooth 默认为false,设置为true后会变成柔滑曲线
#4 symbol 拐点样式,支持自定义图片,预设有'circle' | 'rectangle' | 'triangle' | 'diamond'
自定义图片:
symbol: 'image://../asset/ico/favicon.png', // 个性化拐点图形
#5 symbolSize 控制拐点大小
#6 itemStyle 控制拐点样式
#7 animation 关闭拐点动画
#8 data数据,可以是数组(本例是多维数组),可以是对象
#9 lineStyle 折线样式
#10 areaStyle 控制阴影样式,本例是做的渐变色
要点三:tooltip
下班了,之后在更... : -)
评论