| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="../common/jquery.min.js"></script> |
| <script src="../common/echarts.min.js"></script> |
| <script src="../common/prettify/prettify.js"></script> |
| <script src="../common/showCode.js"></script> |
| <link rel="stylesheet" href="../common/reset.css"> |
| <link rel="stylesheet" href="../common/prettify/prettify.css"> |
| <script src="../common/perfect-scrollbar/0.6.8/js/perfect-scrollbar.min.js"></script> |
| <link rel="stylesheet" href="../common/perfect-scrollbar/0.6.8/css/perfect-scrollbar.min.css"> |
| </head> |
| <body> |
| |
| <div id="main"> |
| <pre class="prettyprint"> |
| option = { |
| ..., |
| series: [{ |
| // 一条折线 |
| type: 'line', |
| name: 'the-line', |
| ... |
| }, { |
| // 用作折线下虚柱阴影 |
| type: 'bar', |
| // 使用同样的 name 使能同步被 legend 控制。 |
| name: 'the-line', |
| itemStyle: { |
| normal: { |
| // 渐变 |
| color: new echarts.graphic.LinearGradient( |
| 0, 0, 0, 1, |
| [ |
| {offset: 0, color: '#14c8d4'}, |
| {offset: 1, color: '#43eec6'} |
| ] |
| ) |
| } |
| }, |
| }, { |
| // 用作折线下虚柱阴影 |
| type: 'pictorialBar', |
| name: 'dotted', |
| ... |
| }, |
| ... |
| ] |
| } |
| |
| |
| </pre> |
| <div id="chart"></div> |
| </div> |
| |
| |
| <script> |
| |
| |
| // Generate data |
| var category = []; |
| var dottedBase = +new Date(); |
| var lineData = []; |
| var barData = []; |
| |
| for (var i = 0; i < 20; i++) { |
| var date = new Date(dottedBase += 3600 * 24 * 1000); |
| category.push([ |
| date.getFullYear(), |
| date.getMonth() + 1, |
| date.getDate() |
| ].join('-')); |
| var b = Math.random() * 200; |
| var d = Math.random() * 200; |
| barData.push(b) |
| lineData.push(d + b); |
| } |
| |
| |
| // option |
| option = { |
| backgroundColor: '#0f375f', |
| tooltip: { |
| trigger: 'axis', |
| axisPointer: { |
| type: 'shadow' |
| } |
| }, |
| legend: { |
| data: ['line', 'bar'], |
| textStyle: { |
| color: '#ccc' |
| } |
| }, |
| xAxis: { |
| data: category, |
| axisLine: { |
| lineStyle: { |
| color: '#ccc' |
| } |
| } |
| }, |
| yAxis: { |
| splitLine: {show: false}, |
| axisLine: { |
| lineStyle: { |
| color: '#ccc' |
| } |
| } |
| }, |
| series: [{ |
| name: 'line', |
| type: 'line', |
| smooth: true, |
| showAllSymbol: true, |
| symbol: 'emptyCircle', |
| symbolSize: 15, |
| data: lineData |
| }, { |
| name: 'bar', |
| type: 'bar', |
| barWidth: 10, |
| itemStyle: { |
| normal: { |
| barBorderRadius: 5, |
| color: new echarts.graphic.LinearGradient( |
| 0, 0, 0, 1, |
| [ |
| {offset: 0, color: '#14c8d4'}, |
| {offset: 1, color: '#43eec6'} |
| ] |
| ) |
| } |
| }, |
| data: barData |
| }, { |
| name: 'line', |
| type: 'bar', |
| barGap: '-100%', |
| barWidth: 10, |
| itemStyle: { |
| normal: { |
| color: new echarts.graphic.LinearGradient( |
| 0, 0, 0, 1, |
| [ |
| {offset: 0, color: 'rgba(20,200,212,0.5)'}, |
| {offset: 0.2, color: 'rgba(20,200,212,0.2)'}, |
| {offset: 1, color: 'rgba(20,200,212,0)'} |
| ] |
| ) |
| } |
| }, |
| z: -12, |
| data: lineData |
| }, { |
| name: 'dotted', |
| type: 'pictorialBar', |
| symbol: 'rect', |
| itemStyle: { |
| normal: { |
| color: '#0f375f' |
| } |
| }, |
| symbolRepeat: true, |
| symbolSize: [12, 4], |
| symbolMargin: 1, |
| z: -10, |
| data: lineData |
| }] |
| }; |
| |
| |
| initShowCode(option, {codeWidth: 600}); |
| |
| </script> |
| </body> |
| </html> |
