ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等)。
支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图等11类图表,同时提供标题,详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件,支持多图表、组件的联动和混搭展现。
可能还要涉及到科学计数法的渲染问题。
比如 2000
是渲染成 2e3
还是渲染成 2*10^3
,或者 2*103,或者直接显示2000
如图:
解决方法:数据渲染可以通过自定义formatter,代码如下:
option = {
grid: { // 关于此配置项的说明,见下边的备注说明
width: '700px',
height: '200px', x: 80, y: 20, x2: 0, y2: 0
},
tooltip : {
trigger: 'axis'
},
calculable : false,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: function(v){
return (v/1000)+'千'
}
}
}
],
series : [
{
name:'郑州网建',
type:'line',
data:[11, 1158, 15, 123233, 12, 12333, 320]
},
{
name:'Camnpr',
type:'line',
data:[1, -2, 2, 5, 3, 2, 0]
}
]
};
效果如下:
备注:关于grid选项里的:width,height,x,y,x2,y2的说明,关乎样式问题: