ECharts
View on GitHub
Home
Example
API & Doc
Download
ZIP (1.1.0)
ZIP (Latest)
Link
Ecom-FE
Data Visualization
ZRender
Tangram
option
option = { tooltip : { trigger: 'axis' }, legend: { data:['邮件营销','联盟广告','直接访问','搜索引擎'] }, toolbox: { show : true, feature : { mark : true, dataView : {readOnly: false}, magicType:['line', 'bar'], restore : true } }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false, data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value', splitArea : {show : true} } ], series : [ { name:'邮件营销', type:'line', stack: '总量', symbol: 'none', itemStyle: { normal: { areaStyle: { // 区域图,纵向渐变填充 color : (function(){ var zrColor = require('zrender/tool/color'); return zrColor.getLinearGradient( 0, 200, 0, 400, [[0, 'rgba(255,0,0,0.8)'],[0.8, 'rgba(255,255,255,0.1)']] ) })() } } }, data:[120, 132, 301, 134, 90, 230, 210] }, { name:'联盟广告', type:'line', stack: '总量', symbol: 'emptyCircle', // 系列级个性化拐点图形 symbolSize: 8, data:[ 120, 82, { value:201, symbol: 'star', // 数据级个性化拐点图形 symbolSize : 15 }, { value:134, symbol: 'none' }, 190, 230, 110 ] }, { name:'直接访问', type:'line', stack: '总量', itemStyle: { normal: { color: 'red', lineStyle: { // 系列级个性化折线样式 width: 2, type: 'dashed' } }, emphasis: { color: 'blue' } }, data:[ 320, 332, '-', 334, { value: 390, symbol: 'star6', symbolSize : 15, itemStyle: { // 数据级个性化折线样式 normal: { color: 'yellowgreen' }, emphasis: { color: 'orange' } } }, 330, 320 ] }, { name:'搜索引擎', type:'line', itemStyle: { normal: { lineStyle: { // 系列级个性化折线样式,横向渐变描边 width: 2, color: (function(){ var zrColor = require('zrender/tool/color'); return zrColor.getLinearGradient( 0, 0, 1000, 0, [[0, 'rgba(255,0,0,0.8)'],[0.8, 'rgba(255,255,0,0.8)']] ) })() } } }, data:[620, 732, 701, 734, 890, 930, 820] } ] };
Refresh ~