angular-echarts
angular-echarts copied to clipboard
建议:使API从echarts平滑过渡
刚使用这个指令的时候还是比较困惑的,本以为除了指令本身,它的配置项基本应与echarts一致的,但是并不是这样,这个指令又重新定义了上层API,使用的时候不得查看源码,对比echarts官网API在其中对应的位置,要考虑某个参数到底是不是本来的用意。
其实官网给出的使用结构还是一目了然的:
var option = {
legend: { // 图例配置
padding: 5, // 图例内边距,单位px,默认上下左右内边距为5
itemGap: 10, // Legend各个item之间的间隔,横向布局时为水平间隔,纵向布局时为纵向间隔
data: ['ios', 'android']
},
tooltip: { // 气泡提示配置
trigger: 'item', // 触发类型,默认数据触发,可选为:'axis'
},
xAxis: [ // 直角坐标系中横轴数组
{
type: 'category', // 坐标轴类型,横轴默认为类目轴,数值轴则参考yAxis说明
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}
],
yAxis: [ // 直角坐标系中纵轴数组
{
type: 'value', // 坐标轴类型,纵轴默认为数值轴,类目轴则参考xAxis说明
boundaryGap: [0.1, 0.1], // 坐标轴两端空白策略,数组内数值代表百分比
splitNumber: 4 // 数值轴用,分割段数,默认为5
}
],
series: [
{
name: 'ios', // 系列名称
type: 'line', // 图表类型,折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
},
{
name: 'android', // 系列名称
type: 'line', // 图表类型,折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
data: [45, 123, 145, 526, 233, 343, 44, 829, 33, 123, 45, 13]
}
]
};
myChart.setOption(option);
即:1. 定义option; 2. 设置option 如非echarts API中的属性,不建议放在option中,可另开一个属性,如config, 专门来配置自定义的属性。
<line-chart option="option" config="config"></line-chart>
xAxis和series中的data,处理方式建议:#14
即使封装、简化,也建议不要有对使用方式的太大改变。这样使用起来会更得心应手一些吧。
不错的建议,创建这个 package
初期,只是为了满足自己项目里面的展示需求,因为当时后端返回的数据就是 docs.js
中那种格式,所以直接封在 directive 里面了,但是从通用角度,似乎不应该这样,angular-echarts
只应该充当1个 wrapper
的角色。
按你的建议来修改,改动会比较大,也没法向前兼容了,我会仔细考虑下。
我会从这个角度开始着手做,参考您的代码 :smile:
确实.....这样直接看echarts官方示例代码就能上手了..现在得改directive.js的代码.