您当前位置： >
> ECharts案例教程2
ECharts案例教程2
来源：程序员人生&& 发布时间： 08:20:07 阅读次数：1184次
ECharts案例教程系列文章，试图通过案例从入门到精通的方式学习数据可视化工具ECharts，第1篇我们通过简单的条形图、条形图和折线图的混搭两个案例描写ECharts的使用流程，数据配置框架等。本博文为第2篇，研究时间轴在数据图中的利用。--------------------------------------------------------------我参加了博客之星评选，如果你喜欢我的博客，求投票，您的支持是我的动力之源，走起！-----------------------------------------------------------------------------------------简介ECharts（Enterprise Charts，商业级数据图表）是百度的1个开源的数据可视化工具，底层基于ZRender(1个全新的轻量级canvas类库)，可以比较方便的折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘和漏斗图，同时支持任意维度的堆积和多图表混合展现等。ECharts的开发团队有个Slider介绍为何使用Echarts，感兴趣的童鞋可以移步欣赏（Why ECharts）。案例欣赏本案例为具有时间轴的折线系列图，合适用于对照展现数据，比如某超市年度销量变化图，某产品的前期投入资金图等。大家也能够在线预览、编辑效果，请移步到codepen。& & & &------------------------------------------------------------------------------------------------------------------------------------------------------------------------& & & & & & & & & & & & & & & & & & & & & & & & & & & & &==&带时间轴折线图==全屏预览==在线编辑==下载收藏==& & & &------------------------------------------------------------------------------------------------------------------------------------------------------------------------知识储备1.标签式单文件引入Echarts。官方推荐3种使用引入ECharts的方式，模块化包引入、模块化单文件引入和标签式单文件引入。首篇博客采取了模块化单文件引入的方式，这类方式可以按需加载文件，是官方推荐的方式。本文我们将使用标签式单文件引入的方式，如果你的项目没有基于模块化开发，同时也不基于AMD规范，那末使用标签式单文件方式将会非常方便，我们只需要使用script标签引入1个ECharts库便可，可引入的单文件包括：dist/echarts-all.js和source/echarts-all.js。前者经过紧缩，包括全图表，包括world，china和34个省市级地图数据；后者未紧缩，包括全图表，包括world，china和34个省市级地图数据，可用于调试。//from echarts example
&div id=&main& style=&height:400&&&/div&
&script src=&example/www2/js/dist/echarts-all.js&&&/script&
var myChart = echarts.init(document.getElementById('main'));
var option = {
myChart.setOption(option);
&/body&2.时间轴控件的使用。使用时间轴控件，我们需要从两个方面做准备，1个是设置时间轴，1个是设置每一个时间点（数据和标题等）。设置时间轴。时间轴在ECharts里使用timeline设置，每一个图标最多只能具有1个时间轴，主要参数以下。
时间轴列表，同时也是轴label内容
显示策略，可选为：true（显示） | false（隐藏）
模式是时间类型，时间轴间隔根据时间跨度计算，可选为：'number'
时间轴上多个option切换时是不是进行merge操作，同setOption第2个参数（详见实例方法）
拖拽或点击改变时间轴是不是实时显示，在不支持Canvas的阅读器中该值自动强迫置为false
是不是自动播放
是不是循环播放
playInterval
播放时间间隔
currentIndex
当前索引位置，对应options数组，用于指定显示特定系列
number|string
时间轴宽度，默许为总宽度 - x - x2，指定width后将疏忽x2。
number|string
时间轴高度
number|string
时间轴左上角横坐标
number|string
时间轴左上角纵坐标，默许无，随y2定位，
number|string
时间轴右下角横坐标
number|string
时间轴右下角纵坐标
number|Array
内边距，单位px,接受数组分别设定上右下左侧距，同css。
backgroundColor
'rgba(0,0,0,0)'
背景色彩，默许透明。
borderWidth
borderColor
controlPosition
播放控制器位置，可选为：'left' | 'right' | 'none'
时间轴轴线样式，lineStyle控制线条样式，（详见lineStyle）
时间轴标签文本
checkpointStyle
时间轴当前点
controlStyle
时间轴控制器样式，可指定正常和高亮色彩
'emptyDiamond'
轴点symbol，同serie.symbol
symbolSize
轴点symbol，同serie.symbolSize注意：a++. width、height、x、x2、y、y2等设置大小位置的参数，类型为number|string，可以接受数值型，单位为px，也可接受百分比（字符串），如50%表示居中显示。b++. lineStyle的默许值为{color: '#666', width: 1, type: 'dashed'}c++. label的默许值为代码所示。参数解释以下show : 是不是显示 ；interval : 挑选间隔，默许为'auto'，可选为：'auto'（自动隐藏显示不下的） | 0（全部显示） | {number} ；rotate : 旋转角度，默许为0，不旋转，正值为逆时针，负值为顺时针，可选为：⑼0 ~ 90 ；formatter ： 间隔名称格式器：{string}（Template） | {Function} ；textStyle : 文字样式（详见textStyle）{
show: true,
interval: 'auto',
rotate: 0,
formatter: null,
textStyle: {
color: '#333'
} d++.&checkpointStyle的参数解释以下，默许值为代码所示。symbol : 当前点symbol，默许随轴上的symbol&symbolSize : 当前点symbol大小，默许随轴上symbol大小&color : 当前点symbol色彩，默许为随当前点色彩，可指定具体色彩，如无则为'#1e90ff'&borderColor ： 当前点symbol边线色彩&borderWidth ： 当前点symbol边线宽度&label同c{
symbol : 'auto',
symbolSize : 'auto',
color : 'auto',
borderColor : 'auto',
borderWidth : 'auto',
show: false,
textStyle: {
color: 'auto'
} e++.&controlStyle的默许值为{
normal : { color : '#333'},
emphasis : { color : '#1e90ff'}
样式参数在时间轴上的作用效果见下图详视。设置每一个时间点。第2步是设置每一个具体的时间点，每一个时间点就是1个图标，包括标题、图例、坐标轴、数据等，固然1般坐标轴、图例等不变，仅仅改变标题和数据。var option = {
//时间轴设置
timeline : {},
//时间点设置
options : [
//第1个时间点
//第2个时间点
}实现进程然后我们来解读实现进程。时间轴里面我们设置了时间戳，仅仅显示年份；为保证美观，调剂了时间轴的位置；同时设定了时间轴播放设置。var option = {
//时间轴设置
timeline : {
//时间轴时间列表
'','','','',''
//自定义处理，只显示年份
formatter : function(s) {
return s.slice(0, 4);
//时间轴的位置设定
height:80,
padding:[40,10,10,10],
//时间轴播放控制
autoPlay : true,
playInterval : 2000
//时间点设置
options : [
//第1个时间点
//第2个时间点
}然后设置时间点，先看2012年的数据设置，我们设置标题、提示、图例、坐标轴、绘制数据线。var option = {
//时间轴设置
timeline : {
//时间轴时间列表
'','','','',''
//自定义处理，只显示年份
formatter : function(s) {
return s.slice(0, 4);
//时间轴的位置设定
height:80,
padding:[40,10,10,10],
//时间轴播放控制
autoPlay : true,
playInterval : 2000
//时间点设置
options : [
//第1个时间点
//2002年数据表,新增内容
text:'2002年货物销量图',
subtext:'纯属捏造，如有雷同，人品爆发。'
//设置提示
tooltip: {
show: true
//设置图例
data:['销量']
//设置坐标轴
type : 'category',
data : [&衬衫&,&羊毛衫&,&雪纺衫&,&裤子&,&高跟鞋&,&袜子&,&帽子&,&围巾&],
axisLabel:{
margin:⑵0,
textStyle:{
color:'#999',
fontWeight:'bold'
type : 'value'
series : [
type:'line',
data:[5, 20, 38, 10, 24, 20,24,32],
//绘制平均线
markLine : {
{type : 'average', name: '平均值'}
//绘制最高最低点
markPoint : {
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
//第2个时间点
}其他时间点只需要设置于2002年不同的地方便可，本例我们仅仅设置标题和数据表。var option = {
//时间轴设置
timeline : {
//时间轴时间列表
'','','','',''
//自定义处理，只显示年份
formatter : function(s) {
return s.slice(0, 4);
//时间轴的位置设定
height:80,
padding:[40,10,10,10],
//时间轴播放控制
autoPlay : true,
playInterval : 2000
//时间点设置
options : [
//第1个时间点
//2002年数据表
text:'2002年货物销量图',
subtext:'纯属捏造，如有雷同，人品爆发。'
//设置提示
tooltip: {
show: true
//设置图例
data:['销量']
//设置坐标轴
type : 'category',
data : [&衬衫&,&羊毛衫&,&雪纺衫&,&裤子&,&高跟鞋&,&袜子&,&帽子&,&围巾&],
axisLabel:{
margin:⑵0,
textStyle:{
color:'#999',
fontWeight:'bold'
type : 'value'
series : [
type:'line',
data:[5, 20, 38, 10, 24, 20,24,32],
//绘制平均线
markLine : {
{type : 'average', name: '平均值'}
//绘制最高最低点
markPoint : {
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
//第2个时间点
//2003年数据表，新增内容
text:'2003年货物销量图',
subtext:'纯属捏造，如有雷同，人品爆发。'
series : [
type:'line',
data:[10, 20, 36, 18, 26, 16,20,34],
//绘制平均线
markLine : {
{type : 'average', name: '平均值'}
//绘制最高最低点
markPoint : {
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
//第3个时间点
}剩下的就不多说了，大家自行补足。感谢您的浏览，欢迎提出您的宝贵意见。----------------------------------------------------------前端开发whqet，关注开发，分享相干资源，欢迎点赞，欢迎拍砖。---------------------------------------------------------------------------------------------------------
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
------分隔线----------------------------
------分隔线----------------------------
积分：4192二次元同好交流新大陆
扫码下载App
汇聚2000万达人的兴趣社区下载即送20张免费照片冲印
扫码下载App
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
就算没有倾城的美貌,也要具有摧毁一切的骄傲！
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
?&!DOCTYPE html&&head&& & &meta charset="utf-8"&& & &title&ECharts&/title&&/head&&body&& & &!-- 为ECharts准备一个具备大小（宽高）的Dom --&& & &div id="main" style="height:400px"&&/div&& & &!-- ECharts单文件引入 --&& & &script src="../dist/echarts.js"&&/script&& & &script type="text/javascript"&& & & & // 路径配置& & & & require.config({& & & & & & paths: {& & & & & & & & echarts: '../dist'& & & & & & }& & & & });& & & &&& & & & // 使用& & & & require(& & & & & & [& & & & & & & & 'echarts',& & & & & & & & 'echarts/chart/gauge'& & & & & & ],& & & & & & function (ec) {& & & & & & & & // 基于准备好的dom，初始化echarts图表& & & & & & & & var myChart = ec.init(document.getElementById('main'));&& & & && & & & & & & & option = {& & backgroundColor: '#1b1b1b',& & tooltip : {& & & & formatter: "{a} &br/&{c} {b}"& & },& & toolbox: {& & & & show : true,& & & & feature : {& & & & & & mark : {show: true},& & & & & & restore : {show: true},& & & & & & saveAsImage : {show: true}& & & & }& & },& & series : [& & & & {& & & & & & name:'速度',& & & & & & type:'gauge',& & & & & & min:0,& & & & & & max:220,& & & & & & splitNumber:11,& & & & & & axisLine: { & & & & & &// 坐标轴线& & & & & & & & lineStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],& & & & & & & & & & width: 3,& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & axisLabel: { & & & & & &// 坐标轴小标记& & & & & & & & textStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & fontWeight: 'bolder',& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & axisTick: { & & & & & &// 坐标轴小标记& & & & & & & & length :15, & & & &// 属性length控制线长& & & & & & & & lineStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & color: 'auto',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & splitLine: { & & & & & // 分隔线& & & & & & & & length :25, & & & & // 属性length控制线长& & & & & & & & lineStyle: { & & & // 属性lineStyle（详见lineStyle）控制线条样式& & & & & & & & & & width:3,& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & pointer: { & & & & & // 分隔线& & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & shadowBlur: 5& & & & & & },& & & & & & title : {& & & & & & & & textStyle: { & & & // 其余属性默认使用全局文本样式，详见TEXTSTYLE& & & & & & & & & & fontWeight: 'bolder',& & & & & & & & & & fontSize: 20,& & & & & & & & & & fontStyle: 'italic',& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & detail : {& & & & & & & & backgroundColor: 'rgba(30,144,255,0.8)',& & & & & & & & borderWidth: 1,& & & & & & & & borderColor: '#fff',& & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & shadowBlur: 5,& & & & & & & & offsetCenter: [0, '50%'], & & & // x, y，单位px& & & & & & & & textStyle: { & & & // 其余属性默认使用全局文本样式，详见TEXTSTYLE& & & & & & & & & & fontWeight: 'bolder',& & & & & & & & & & color: '#fff'& & & & & & & & }& & & & & & },& & & & & & data:[{value: 40, name: 'km/h'}]& & & & },& & & & {& & & & & & name:'转速',& & & & & & type:'gauge',& & & & & & center : ['25%', '55%'], & &// 默认全局居中& & & & & & radius : '50%',& & & & & & min:0,& & & & & & max:7,& & & & & & endAngle:45,& & & & & & splitNumber:7,& & & & & & axisLine: { & & & & & &// 坐标轴线& & & & & & & & lineStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & color: [[0.29, 'lime'],[0.86, '#1e90ff'],[1, '#ff4500']],& & & & & & & & & & width: 2,& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & axisLabel: { & & & & & &// 坐标轴小标记& & & & & & & & textStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & fontWeight: 'bolder',& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & axisTick: { & & & & & &// 坐标轴小标记& & & & & & & & length :12, & & & &// 属性length控制线长& & & & & & & & lineStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & color: 'auto',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & splitLine: { & & & & & // 分隔线& & & & & & & & length :20, & & & & // 属性length控制线长& & & & & & & & lineStyle: { & & & // 属性lineStyle（详见lineStyle）控制线条样式& & & & & & & & & & width:3,& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & pointer: {& & & & & & & & width:5,& & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & shadowBlur: 5& & & & & & },& & & & & & title : {& & & & & & & & offsetCenter: [0, '-30%'], & & & // x, y，单位px& & & & & & & & textStyle: { & & & // 其余属性默认使用全局文本样式，详见TEXTSTYLE& & & & & & & & & & fontWeight: 'bolder',& & & & & & & & & & fontStyle: 'italic',& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & detail : {& & & & & & & & //backgroundColor: 'rgba(30,144,255,0.8)',& & & & & & & &// borderWidth: 1,& & & & & & & & borderColor: '#fff',& & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & shadowBlur: 5,& & & & & & & & width: 80,& & & & & & & & height:30,& & & & & & & & offsetCenter: [25, '20%'], & & & // x, y，单位px& & & & & & & & textStyle: { & & & // 其余属性默认使用全局文本样式，详见TEXTSTYLE& & & & & & & & & & fontWeight: 'bolder',& & & & & & & & & & color: '#fff'& & & & & & & & }& & & & & & },& & & & & & data:[{value: 1.5, name: 'x1000 r/min'}]& & & & },& & & & {& & & & & & name:'油表',& & & & & & type:'gauge',& & & & & & center : ['75%', '50%'], & &// 默认全局居中& & & & & & radius : '50%',& & & & & & min:0,& & & & & & max:2,& & & & & & startAngle:135,& & & & & & endAngle:45,& & & & & & splitNumber:2,& & & & & & axisLine: { & & & & & &// 坐标轴线& & & & & & & & lineStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & color: [[0.2, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],& & & & & & & & & & width: 2,& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & axisTick: { & & & & & &// 坐标轴小标记& & & & & & & & length :12, & & & &// 属性length控制线长& & & & & & & & lineStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & color: 'auto',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & axisLabel: {& & & & & & & & textStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & fontWeight: 'bolder',& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & },& & & & & & & & formatter:function(v){& & & & & & & & & & switch (v + '') {& & & & & & & & & & & & case '0' : return 'E';& & & & & & & & & & & & case '1' : return 'Gas';& & & & & & & & & & & & case '2' : return 'F';& & & & & & & & & & }& & & & & & & & }& & & & & & },& & & & & & splitLine: { & & & & & // 分隔线& & & & & & & & length :15, & & & & // 属性length控制线长& & & & & & & & lineStyle: { & & & // 属性lineStyle（详见lineStyle）控制线条样式& & & & & & & & & & width:3,& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & pointer: {& & & & & & & & width:2,& & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & shadowBlur: 5& & & & & & },& & & & & & title : {& & & & & & & & show: false& & & & & & },& & & & & & detail : {& & & & & & & & show: false& & & & & & },& & & & & & data:[{value: 0.5, name: 'gas'}]& & & & },& & & & {& & & & & & name:'水表',& & & & & & type:'gauge',& & & & & & center : ['75%', '50%'], & &// 默认全局居中& & & & & & radius : '50%',& & & & & & min:0,& & & & & & max:2,& & & & & & startAngle:315,& & & & & & endAngle:225,& & & & & & splitNumber:2,& & & & & & axisLine: { & & & & & &// 坐标轴线& & & & & & & & lineStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & color: [[0.2, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],& & & & & & & & & & width: 2,& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & axisTick: { & & & & & &// 坐标轴小标记& & & & & & & & show: false& & & & & & },& & & & & & axisLabel: {& & & & & & & & textStyle: { & & & // 属性lineStyle控制线条样式& & & & & & & & & & fontWeight: 'bolder',& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & },& & & & & & & & formatter:function(v){& & & & & & & & & & switch (v + '') {& & & & & & & & & & & & case '0' : return 'H';& & & & & & & & & & & & case '1' : return 'Water';& & & & & & & & & & & & case '2' : return 'C';& & & & & & & & & & }& & & & & & & & }& & & & & & },& & & & & & splitLine: { & & & & & // 分隔线& & & & & & & & length :15, & & & & // 属性length控制线长& & & & & & & & lineStyle: { & & & // 属性lineStyle（详见lineStyle）控制线条样式& & & & & & & & & & width:3,& & & & & & & & & & color: '#fff',& & & & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & & & shadowBlur: 10& & & & & & & & }& & & & & & },& & & & & & pointer: {& & & & & & & & width:2,& & & & & & & & shadowColor : '#fff', //默认透明& & & & & & & & shadowBlur: 5& & & & & & },& & & & & & title : {& & & & & & & & show: false& & & & & & },& & & & & & detail : {& & & & & & & & show: false& & & & & & },& & & & & & data:[{value: 0.5, name: 'gas'}]& & & & }& & ]};clearInterval(timeTicket);timeTicket = setInterval(function (){& & option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;& & option.series[1].data[0].value = (Math.random()*7).toFixed(2) - 0;& & option.series[2].data[0].value = (Math.random()*2).toFixed(2) - 0;& & option.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0;& & myChart.setOption(option,true);},2000)& & & & & & & & & & & & & & & & &&& & & & & & & & // 为echarts对象加载数据&& & & & & & & & myChart.setOption(option);&& & & & & & }& & & & );& & &/script&&/body&2、在编码器Brackets.exe中运行（或者直接用Google浏览器打开文件），会出现以下这种或者其它种的错误（运行不出来，白页面）然后面对这种错误，单击右键出现，点击审查元素，后出现红色警告，则这就是运行不出来的原因。Uncaught ReferenceError: timeTicket is not defined，显然警告说timeTicke函数没有被定义，所以就理所应当的在代码中加上timeTicke函数的定义。Var&timeTicke；之后运行则成功：&&&&&
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'Echarts中怎么简单的找错误？',
blogAbstract:'& & &1、在记事本中写好代码eg：（写的是你没有发现的错误的代码）?&!DOCTYPE html&&head&& & &meta charset=\"utf-8\"&& & &title&ECharts&/title&&/head&&body&& & &!-- 为ECharts准备一个具备大小（宽高）的Dom --&& & &div id=\"main\" style=\"height:400px\"&&/div&& & &!-- ECharts单文件引入 --&& & &script src=\"../dist/echarts.js\"&&/script&& & &script type=\"text/javascript\"&',
blogTag:'echarts中错误？,echarts,var,timeticke,echarts图表',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:6,
publishTime:5,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'就算没有倾城的美貌,也要具有摧毁一切的骄傲！',
hmcon:'-1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}}