学习使用echarts一周了,也用echarts也做了几个简单的图。现在总结一下这个过程中遇到的问题及解决方法。写这篇随笔主要是给自己以后看的,也希望能够帮助一些刚开始学习使用echarts的朋友。各路大神不喜勿喷!
1. 如何将编写的echarts JavaScript代码独立出来。
如大家在echarts文档中看到的实例代码,其一般是将echarts写在HTMl代码中的。然而当echarts代码很多时,修改维护起来就不是很方便。所以将echarts代码独立成一个JavaScript文件是很多必要的。
其实方法很简单,就是将所有的echarts的代码放入一个js文件中。然后在html文件中应用就行了。就像引用其他的js文件一样。但是需要注意的是,引用时需要对编码方式进行设置。具体代码如下:
<script src="./dist/echarts.js"></script> <script src="js/plugins/DPI/p2pCharts_page.js" type="text/javascript" charset="GB2312"></script> |
2. 时间轴中option的合并问题
在我们展示随时间变化的数据是,最好的方式就是使用时间轴。然而官方文档中的实例代码有点复杂。其中还有没有贴出代码的方法。这里我写了一个简单的使用时间轴的图表如图2.1。
图中展示的是18-22点各时段各种P2P视频软件使用量和流量。其实代码也是十分简单的,需要注意的是各个时间的option要放在options[]中,而且顺序要和时间相对应。最需要是“notMerge”属性。notMerge的意思为“不合并”,其表示当时间转换时当前时刻的option是否和前面的option合并。一般来讲是若只有数据在变,则合并是最好的选择。因为这样就能够减少很多代码。但是,当你想每个时间展现不同设置的图时(如每个图的legend不同、或是图完全不同),就可以不合并。
3. legend换行换列问题
有的时候当legend很多时,需要人为换行换列以便展示效果更好(如图3.1)。虽然这是一个很小的问题,但是看文档不仔细就容易忽略这样的问题。其换行的方法是在需要换行的地方加上‘’即可。具体代码如下(红色即是换行):
legend: { orient : 'horizontal', x : 'center', y : 'bottom', data:['天猫','淘宝','京东', '时尚女鞋','精品男装','品牌女装','品牌箱包','3C数码配件','','运动鞋','天猫其他', '女装/女士精品','男装', '男装','女装','手机通讯','生活日用','京东其他' ] }, |
4. 时间轴图表代码
var P2PAllChart = ec.init(document.getElementById('P2Pall-chart',"infographic")); var P2PAlloption = { timeline:{ data:['18','19','20','21','22'], show: true, type: 'number', notMerge: false, realtime: true, x: 80,
x2: 80, y2: 0, //width:'自适应' height: 50, backgroundColor: 'rgba(0,0,0,0)', borderWidth: 0, borderColor: '#ccc', padding: 5, controlPosition: 'left', autoPlay: true, loop: true, playInterval: 2000, lineStyle: { color: '#666', width: 1, type: 'dashed' }, label: { show: true, interval: 'auto', rotate: 0, formatter: null, textStyle:{ color: '#333' } }, checkpointStyle:{ symbol: 'auto', symbolSize: 'auto', color: 'auto', borderColor: 'auto', borderWidth: 'auto', label:{ show: false, textStyle: { color: 'auto' } } }, controlStyle:{ itemSize: 15, itemGap: 5, normal : { color : '#333' }, emphasis : { color : '#1e90ff' } }, symbol: 'emptyDiamond', symbolSize: 4, currentIndex: 0
}, options:[ { title: { show: true, text: '18时使用量和流量' }, tooltip: { show: true }, toolbox: { show: true, orient: 'horizontal', x: 'right', y: 'top', backgroundColor: 'rgba(0,0,0,0)', borderColor: '#ccc', boderWidth: 0, padding: 5, itemGap: 10, feature: { mark: { show: true, title: { mark: '辅助线开关', markUndo: '删除辅助线', markClear: '清空辅助线' }, linStyle: { width: 2, color: '#1e90ff', type: 'dashed' } }, dataZoom: { show: true, title: { dataZoom: '区域缩放', dataZoomReset: '区域缩放后退' } }, dataView: { show: true, title: '数据视图', readOnly: false, lang: ['数据视图', '关闭', '刷新'] }, magicType: { show: true, title: { line: '动态类型切换-折线图', bar: '动态类型切换-柱形图', stack: '动态类型切换-堆积', tiled: '动态类型切换-平铺' }, type: ['line', 'bar', 'stack', 'tiled'] }, restore: { show: true, title: '还原', color: 'black' }, saveAsImage: { show: true, title: '保存为图片', type: 'jpeg', lang: ['点击本地保存'] }, myTool: { show: true, title: '自定义扩展方法', icon: 'image://../asset/ico/favicon.png', onclick: function () { alert('myToolHandler') } } } }, legend: { show: true, orient: 'horizontal', selected: { '使用量': true, '流量': true }, data: ['使用量', '流量'] }, xAxis: [ { type: 'category', data: ["PPLive", "QQLive", "BaiDuYY", "BaoFengYY", "XunLeiKK", "PPS", "Thunder", "Nonp2p"] } ], yAxis :[ { type : 'value', name : '使用量', axisLabel : { formatter: '{value} 次' } }, { type : 'value', name : '流量', axisLabel : { formatter: '{value} Mb' } } ], series: [ { "name": "使用量", "type": "bar", itemStyle: { normal: { color: function (params) { // build a color map as your need. var colorList = [ '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD', '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0' ]; return colorList[params.dataIndex] }, label: { show: true, position: 'top', formatter: '{b}\n{c}' }, barBorderRadius: 10 } }, "data": [15684, 3493, 13891, 4302, 15620, 1846, 707, 1411] }, { name : '流量', type : 'bar', 'yAxisIndex':1, itemStyle: { normal: { color: function (params) { // build a color map as your need. var colorList = [ '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD', '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0' ]; return colorList[params.dataIndex] }, label: { show: true, position: 'top', formatter: '{b}\n{c}' }, barBorderRadius: 10 } }, data : [ 748449, 422317, 727746, 247793, 2120218, 127928, 464893, 63821 ] } ] }, { title: { text: '19时使用量和流量' }, series: [ { "data": [24527, 3965, 23715, 7973, 27875, 1617, 1128, 1831] }, { data : [1149830, 319789, 819842, 446217, 2735956, 138424, 489110, 59071] } ] }, { title: { text: '20时使用量和流量' }, series: [ { "data": [13387, 2107, 9331, 3964, 10708, 795, 477, 1506] }, { data : [454341 , 15, 375061, 131831, 451080, 25458, 97273, 31720] } ] }, { title: { text: '21时使用量和流量' }, series: [ { "data": [15587, 2345, 8790, 3078, 13556, 1345, 667, 1612] }, { data : [456789, 318678, 809876, 401080, 2435656, 128424, 389110, 29071] } ] }, { title: { text: '22时使用量和流量' }, series: [ { "data": [17400, 2772, 11346, 5688, 14784, 1626, 971, 1612] }, { data : [617148 , 209547, 411986, 191270, 984777, 26157, 319471, 59553] } ] } ] |