歡迎使用Markdown編輯器寫博客
本Markdown編輯器使用[StackEdit][6]修改而來,用它寫博客,將會帶來全新的體驗哦:
- 示例
- 效果圖
代碼塊
(html文件)
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<!--添加主題-->
<script src="roma.js"></script>
<!-- 爲ECharts準備一個具備大小(寬高)的Dom -->
<div class="row">
<div id="one" class="col-md-6 col-xs-12" style="height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom,初始化echarts實例
var myChart = echarts.init(document.getElementById('one'), 'roma');
// 指定圖表的配置項和數據
option = {
title : {
text: '月保費佔比',
subtext: '純屬虛構',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['紅系列','金系列','獲客','利贏','短意','短健']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'訪問來源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:`${data[0].amtM}`, name:'紅系列'},
{value:`${data[1].amtM}`, name:'金系列'},
{value:`${data[2].amtM}`, name:'獲客'},
{value:`${data[3].amtM}`, name:'利贏'},
{value:`${data[4].amtM}`, name:'短意'},
{value:`${data[5].amtM}`, name:'短健'}
]
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</div>
(roma.js)文件,也可以網上download
(function (root, factory) {if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['exports', 'echarts'], factory);
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
// CommonJS
factory(exports, require('echarts'));
} else {
// Browser globals
factory({}, root.echarts);
}
}(this, function (exports, echarts) {
var log = function (msg) {
if (typeof console !== 'undefined') {
console && console.error && console.error(msg);
}
};
if (!echarts) {
log('ECharts is not Loaded');
return;
}
var colorPalette = ['#E01F54','#001852','#f5e8c8','#b8d2c7','#c6b38e',
'#a4d8c2','#f3d999','#d3758f','#dcc392','#2e4783',
'#82b6e9','#ff6347','#a092f1','#0a915d','#eaf889',
'#6699FF','#ff6666','#3cb371','#d5b158','#38b6b6'
];
var theme = {
color: colorPalette,
visualMap: {
color:['#e01f54','#e7dbc3'],
textStyle: {
color: '#333'
}
},
candlestick: {
itemStyle: {
normal: {
color: '#e01f54',
color0: '#001852',
lineStyle: {
width: 1,
color: '#f5e8c8',
color0: '#b8d2c7'
}
}
}
},
graph: {
color: colorPalette
},
gauge : {
axisLine: {
lineStyle: {
color: [[0.2, '#E01F54'],[0.8, '#b8d2c7'],[1, '#001852']],
width: 8
}
}
}
};
echarts.registerTheme('roma', theme);
}));