echats 饼图
2018-08-02 本文已影响0人
雅雅的前端工作学习
昨天做的饼状图，legend部分的format函数做的不够美观，以后改进：
<div class="coin-baike">
<div class="zhangdie">
<h3>EOS持币集中度分析</h3>
</div>
<div class="bzt">
<div class="bzt-box">
<div class="bzt-img">
<div id="container" style="height: 100%"></div>
<div class="bzt-title"><p>交易对成交占比</p></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
// 颜色集合
var colorList = [
'#66c5d7', '#11c88c', '#989cff', '#ffa55d', '#9c7de1', '#5d9eff', '#ffdb5d', '#ee82ed', '#8fca5f', '#b995f5'
];
// 总和
var total = {
value: '42.38%',
name: 'USDT'
}
var originalData = [{
value: 42.38,
name: 'USDT'
}, {
value: 21.10,
name: 'BTC'
}, {
value: 12.43,
name: 'KRW'
},{
value: 11.86,
name: 'USD'
},{
value: 8.01,
name: 'ETH'
},{
value: 1.25,
name: 'CNY'
},{
value: 1.02,
name: 'OKB'
},{
value: 0.69,
name: 'ZC '
},{
value: 0.43,
name: 'EUR'
},{
value: 0.83,
name: 'other'
}];
echarts.util.each(originalData, function(item, index) {
item.itemStyle = {
normal: {
color: colorList[index]
}
};
});
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: '45%',
data: ['USDT', 'BTC', 'KRW', 'USD', 'ETH', 'CNY', 'OKB', 'ZC', 'EUR', 'other'],
formatter: function(name) {
var index = 0;
var clientlabels = ['USDT', 'BTC', 'KRW', 'USD', 'ETH', 'CNY', 'OKB', 'ZC', 'EUR', 'other'];
var clientcounts = ['42.38%' ,'21.10%','12.43%','11.86%','8.01%','1.25%','1.02%','0.69%','0.43%','0.83%'];
var clientprice = ['$1222123456.12' ,'$1222123456.12','$1222123456.12','$1222123456.12','$1222123456.12','$1222123456.12','$1222123456.12','$1222123456.12','$1222123456.12','$1222123456.12'];
clientlabels.forEach(function(value,i){
if(value == name){
index = i;
}
});
return name + " " + clientcounts[index] + " " + clientprice[index];
}
},
backgroundColor:'#ffffff',
title: [{
text: total.name,
left: '19%',
top: '35%',
textAlign: 'center',
textBaseline: 'middle',
textStyle: {
color: '#999',
fontWeight: 'normal',
fontSize: 16
}
}, {
text: total.value,
left: '19%',
top: '46%',
textAlign: 'center',
textBaseline: 'middle',
textStyle: {
color: '#666',
fontWeight: 'normal',
fontSize: 16
}
}],
series: [{
hoverAnimation: false, //设置饼图默认的展开样式
radius: [50, 100],
name: 'pie',
type: 'pie',
center:[110,110],
selectedMode: 'single',
selectedOffset: 5, //选中是扇区偏移量
clockwise: true,
startAngle: 90,
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
itemStyle: {
normal: {
borderWidth: 3,
borderColor: '#ffffff',
},
emphasis: {
borderWidth: 0,
shadowBlur: 5,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.2)'
}
},
data: originalData
}]
};
myChart.setOption(option, true);
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</div>
</div>
<div class="bzt-box">
<div class="bzt-img">
<div id="container2" style="height: 100%"></div>
<div class="bzt-title"><p>交易对成交占比</p></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container2");
var myChart = echarts.init(dom);
// 颜色集合
var colorList = [
'#66c5d7', '#11c88c', '#989cff', '#ffa55d', '#9c7de1', '#5d9eff', '#ffdb5d', '#ee82ed', '#8fca5f', '#b995f5'
];
// 总和
var total = {
value: '42.38%',
name: 'USDT'
}
var originalData = [{
value: 42.38,
name: 'USDT'
}, {
value: 21.10,
name: 'BTC'
}, {
value: 12.43,
name: 'KRW'
},{
value: 11.86,
name: 'USD'
},{
value: 8.01,
name: 'ETH'
},{
value: 1.25,
name: 'CNY'
},{
value: 1.02,
name: 'OKB'
},{
value: 0.69,
name: 'ZC '
},{
value: 0.43,
name: 'EUR'
},{
value: 0.83,
name: 'other'
}];
echarts.util.each(originalData, function(item, index) {
item.itemStyle = {
normal: {
color: colorList[index]
}
};
});
option = {
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: '45%',
data: ['USDT', 'BTC', 'KRW', 'USD', 'ETH', 'CNY', 'OKB', 'ZC', 'EUR', 'other'],
formatter: function(name) {
var index = 0;
var clientlabels = ['USDT', 'BTC', 'KRW', 'USD', 'ETH', 'CNY', 'OKB', 'ZC', 'EUR', 'other'];
var clientcounts = ['42.38%' ,'21.10%','12.43%','11.86%','8.01%','1.25%','1.02%','0.69%','0.43%','0.83%'];
var clientprice = ['$1222123456.12' ,'$1222123456.12','$1222123456.12','$1222123456.12','$1222123456.12','$1222123456.12','$1222123456.12','$1222123456.12','$1222123456.12','$1222123456.12'];
clientlabels.forEach(function(value,i){
if(value == name){
index = i;
}
});
return name + " " + clientcounts[index] + " " + clientprice[index];
}
},
backgroundColor:'#ffffff',
title: [{
text: total.name,
left: '19%',
top: '35%',
textAlign: 'center',
textBaseline: 'middle',
textStyle: {
color: '#999',
fontWeight: 'normal',
fontSize: 16
}
}, {
text: total.value,
left: '19%',
top: '46%',
textAlign: 'center',
textBaseline: 'middle',
textStyle: {
color: '#666',
fontWeight: 'normal',
fontSize: 16
}
}],
series: [{
hoverAnimation: false, //设置饼图默认的展开样式
radius: [50, 100],
name: 'pie',
type: 'pie',
center:[110,110],
selectedMode: 'single',
selectedOffset: 5, //选中是扇区偏移量
clockwise: true,
startAngle: 90,
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
itemStyle: {
normal: {
borderWidth: 3,
borderColor: '#ffffff',
},
emphasis: {
borderWidth: 0,
shadowBlur: 5,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.2)'
}
},
data: originalData
}]
};
myChart.setOption(option, true);
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</div>
</div>
</div>
</div>
css样式如下：
.message .coin-baike {
padding: 20px 20px 20px;
position: relative
}
.message .br {
height: 15px;
background-color: #f2f3f5;
z-index: 99
}
.message .zhangdie {
padding-bottom: 6px;
margin-top: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
}
.message .zhangdie h3 {
font-weight: 400;
font-size: 16px;
color: #26b6b0;
}
.message .coin-baike .bzt-box {
display: inline-block;
margin-left: 22px;
position: relative;
}
.message .coin-baike .btz-width {
margin-right: 280px
}
.message .coin-baike .bzt-img {
width: 550px;
height: 250px;
margin-top:30px;
float: left
}
.bzt .bzt-box .bzt-title {
position: absolute;
top: 0;
font-size: 16px;
left: 46%;
color: #333;
width: 125px;
border-bottom: 2px solid #ccc;
}
