echarts学习小结-时间轴-legend

最新推荐文章于 2023-04-24 18:48:32 发布

weixin_30788619

最新推荐文章于 2023-04-24 18:48:32 发布

阅读量206

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tgtomy/p/study_echarts.html

版权

学习使用echarts一周了，也用echarts也做了几个简单的图。现在总结一下这个过程中遇到的问题及解决方法。写这篇随笔主要是给自己以后看的，也希望能够帮助一些刚开始学习使用echarts的朋友。各路大神不喜勿喷！

1. 如何将编写的echarts JavaScript代码独立出来。

如大家在echarts文档中看到的实例代码，其一般是将echarts写在HTMl代码中的。然而当echarts代码很多时，修改维护起来就不是很方便。所以将echarts代码独立成一个JavaScript文件是很多必要的。

其实方法很简单，就是将所有的echarts的代码放入一个js文件中。然后在html文件中应用就行了。就像引用其他的js文件一样。但是需要注意的是，引用时需要对编码方式进行设置。具体代码如下：

2. 时间轴中option的合并问题

在我们展示随时间变化的数据是，最好的方式就是使用时间轴。然而官方文档中的实例代码有点复杂。其中还有没有贴出代码的方法。这里我写了一个简单的使用时间轴的图表如图2.1。

echarts带有时间轴图

图中展示的是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]

}

]

}

]

转载于:https://www.cnblogs.com/tgtomy/p/study_echarts.html

weixin_30788619

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts学习小结-时间轴-legend

学习使用echarts一周了，也用echarts也做了几个简单的图。现在总结一下这个过程中遇到的问题及解决方法。写这篇随笔主要是给自己以后看的，也希望能够帮助一些刚开始学习使用echarts的朋友。各路大神不喜勿喷！1.如何将编写的echarts JavaScript代码独立出来。如大家在echarts文档中看到的实例代码，其一般是将echarts写在HTMl代码中的。然而当echa...
复制链接

扫一扫