echart 表格渐变
[ { "month": "1月", "sh_market_capitalization": 351041.76, "sh_transaction_amount": 58096.59, "sh_pe_ratio": 19.25, "sz_market_capitalization": 0, "sz_transaction_amount": 0, "sz_pe_ratio": 0 }, { "month": "2月", "sh_market_capitalization": 334105.65, "sh_transaction_amount": 32855.64, "sh_pe_ratio": 18.29, "sz_market_capitalization": 0, "sz_transaction_amount": 0, "sz_pe_ratio": 0 }, { "month": "3月", "sh_market_capitalization": 351041.76, "sh_transaction_amount": 44281.8, "sh_pe_ratio": 17.77, "sz_market_capitalization": 0, "sz_transaction_amount": 0, "sz_pe_ratio": 0 }, { "month": "4月", "sh_market_capitalization": 317966.5, "sh_transaction_amount": 34107.67, "sh_pe_ratio": 17.31, "sz_market_capitalization": 0, "sz_transaction_amount": 0, "sz_pe_ratio": 0 }, { "month": "5月", "sh_market_capitalization": 320700.9, "sh_transaction_amount": 38396.92, "sh_pe_ratio": 15.16, "sz_market_capitalization": 0, "sz_transaction_amount": 0, "sz_pe_ratio": 0 }, { "month": "6月", "sh_market_capitalization": 299581.98, "sh_transaction_amount": 31271.66, "sh_pe_ratio": 14.06, "sz_market_capitalization": 0, "sz_transaction_amount": 0, "sz_pe_ratio": 0 }, { "month": "7月", "sh_market_capitalization": 305437.19, "sh_transaction_amount": 32764.68, "sh_pe_ratio": 14.29, "sz_market_capitalization": 0, "sz_transaction_amount": 0, "sz_pe_ratio": 0 }, { "month": "8月", "sh_market_capitalization": 290651.27, "sh_transaction_amount": 28885.38, "sh_pe_ratio": 13.58, "sz_market_capitalization": 0, "sz_transaction_amount": 0, "sz_pe_ratio": 0 }, { "month": "9月", "sh_market_capitalization": 301557.15, "sh_transaction_amount": 21689.22, "sh_pe_ratio": 14.07, "sz_market_capitalization": 0, "sz_transaction_amount": 0, "sz_pe_ratio": 0 }, { "month": "10月", "sh_market_capitalization": 278622.02, "sh_transaction_amount": 24566.14, "sh_pe_ratio": 13, "sz_market_capitalization": 0, "sz_transaction_amount": 0, "sz_pe_ratio": 0 }, { "month": "11月", "sh_market_capitalization": 300285.49, "sh_transaction_amount": 29652.15, "sh_pe_ratio": 13.88, "sz_market_capitalization": 0, "sz_transaction_amount": 0, "sz_pe_ratio": 0 }, { "month": "12月", "sh_market_capitalization": 320765.48, "sh_transaction_amount": 30985.4, "sh_pe_ratio": 14.65, "sz_market_capitalization": 0, "sz_transaction_amount": 0, "sz_pe_ratio": 0 } ] // 初始化统计图表 var xunjian = echarts.init(document.getElementById('xunjian_echart')); var baogao = echarts.init(document.getElementById('baogao_echart')); var lvxin = echarts.init(document.getElementById('lvxin_echart')); //设置数据 option_xunjian = { backgroundColor: 'white', padding: 15, title: { text: '巡检信息', x: 'left', y: 'top', itemGap: 10, backgroundColor: 'white', // 主标题文本样式设置 textStyle: { fontSize: 16, fontWeight: 'normal', color: '#333333' }, }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'horizontal', y: 'bottom', data: ['正常', '超时', '报警',], }, series: [ { name: '状态', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data: [ { value: 330, name: '正常', itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 1, colorStops: [ {offset: 0, color: '#2D38FF'}, {offset: 1, color: '#969BFB'} ], globalCoord: true // 缺省为 false } }, }, { value: 310, name: '超时', itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 1, colorStops: [ {offset: 0, color: '#FFC700'}, {offset: 1, color: '#FFE13C'} ], globalCoord: true // 缺省为 false } } }, { value: 234, name: '报警', itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 1, colorStops: [ {offset: 0, color: '#FF4200'}, {offset: 1, color: '#FE8257'} ], globalCoord: true // 缺省为 false } } }, ] } ] }; option_baogao = { backgroundColor: 'white', title: { text: '报告信息', x: 'left', y: 'top', itemGap: 10, backgroundColor: 'white', // 主标题文本样式设置 textStyle: { fontSize: 16, fontWeight: 'normal', color: '#333333' }, }, tooltip: { trigger: 'item', show: true, confine: true, formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'horizontal', y: 'bottom', data: ['正常', '超时', '报警',], }, series: [ { name: '状态', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { color: 'rgba(255, 255, 255, 0.3)', normal: { show: false, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'bold' } } }, data: [ { value: 630, name: '正常', itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 1, colorStops: [ {offset: 0, color: '#2D38FF'}, {offset: 1, color: '#969BFB'} ], globalCoord: true // 缺省为 false } }, }, { value: 310, name: '超时', itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 1, colorStops: [ {offset: 0, color: '#FFC700'}, {offset: 1, color: '#FFE13C'} ], globalCoord: true // 缺省为 false } } }, { value: 234, name: '报警', itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 1, colorStops: [ {offset: 0, color: '#FF4200'}, {offset: 1, color: '#FE8257'} ], globalCoord: true // 缺省为 false } } }, ] } ] }; option_lvxin = { backgroundColor: 'white', title: { text: '滤芯信息', x: 'left', y: 'top', itemGap: 10, backgroundColor: 'white', // 主标题文本样式设置 textStyle: { fontSize: 16, fontWeight: 'normal', color: '#333333' }, }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'horizontal', y: 'bottom', data: ['正常', '超时', '报警',], }, series: [ { name: '来源', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '30', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data: [ { value: 580, name: '正常', itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 1, colorStops: [ {offset: 0, color: '#2D38FF'}, {offset: 1, color: '#969BFB'} ], globalCoord: true // 缺省为 false } }, }, { value: 310, name: '超时', itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 1, colorStops: [ {offset: 0, color: '#FFC700'}, {offset: 1, color: '#FFE13C'} ], globalCoord: true // 缺省为 false } } }, { value: 234, name: '报警', itemStyle: { color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 1, colorStops: [ {offset: 0, color: '#FF4200'}, {offset: 1, color: '#FE8257'} ], globalCoord: true // 缺省为 false } } }, ] } ] }; //实例化 xunjian.setOption(option_xunjian); baogao.setOption(option_baogao); lvxin.setOption(option_lvxin);
作者:wj704
出处:http://www.cnblogs.com/wj204/