echarts饼状图实战实例
基于echarts的饼状图
echarts本⼈也是⽤的很少的了，有缘碰到公司在⽤，于是便熟悉熟悉。这⾥就指出⼀些⽇常简单参数和图形做参考。
来看看效果图吧！宝宝舌苔厚白是怎么回事
1.先上vue下的HTML
<template>
<view class="content">
<view @click="Click" :prop="option" :change:prop="echarts.updateEcharts"id="pieChartLabel"
class="echarts">
</view>
<!--
<button @click="changeOption">更新数据</button>
-->
</view>
</template>
2、下⾯就是脚本配置代码
<script>
export default{
//这⾥的props封装组件时候，传值可⽤到，此处下⾯的数据已给出具体初始化化数据此处可先不⽤
props:{
color:{//颜⾊顺序
type: Array,
default:()=>[],
},
dataList:{//数据列表
type: Array,
default:()=>[],
},
centerTitle:{//饼图中间数据
type: String,
default:''
},
centerunit:{//单位
type: String,
default:''
}
},
data(){
心理营养return{
}
},
},
computed:{
option(){索赔函范文
return{
tooltip:{
show:fal,
trigger:'item',
formatter:"{b}:{d}%",
/
*formatter:function(val){ //让ries 中的⽂字进⾏换⾏
console.log(val);//查看val属性，可根据⾥边属性⾃定义内容
var content = var['name'];
return content;//返回可以含有html中标签
},*///⾃定义⿏标悬浮交互信息提⽰，⿏标放在饼状图上时触发事件
},//提⽰框，⿏标悬浮交互时的信息提⽰
graphic:{
type:'text',
left:'center',
top:'center',
style:{
Title +'\n\n'+unit,//使⽤“+”可以使每⾏⽂字居中
textAlign:'center',
font:'12px cursive',
fill:'#A3A9AF',
width:30,
height:30
}
},//此例饼状图为圆环中⼼⽂字显⽰属性，这是⼀个原⽣图形元素组件，功能很多
果汁海报ries:[{
name:'',//tooltip提⽰框中显⽰内容
type:'pie',//图形类型，如饼状图，柱状图等
radius:['50%','65%'],//饼图的半径，数组的第⼀项是内半径，第⼆项是外半径。⽀持百分⽐，本例设置成环形图。具体可以看⽂档或改变其值试⼀试
//roType:'area'，是否显⽰成南丁格尔图，默认fal
labelLine:{
normal:{
length:10,
length2:50
}
},
itemStyle:{
normal:{
label:{
show:true,
textStyle:{
color:'#5B616A',
fontSize:"12"
},
formatter:'{b}\n\n{c}',
padding:[0,-40],//取消hr线跟延长线之间的间隙
/*formatter: function(val) { //让ries 中的⽂字进⾏换⾏
return val.name.split("-").join("\n");
}*/
}//饼图图形上的⽂本标签，可⽤于说明图形的⼀些数据信息，⽐如值，名称等。可以与itemStyle属性同级，具体看⽂档
无事早归
神一
},//基本样式
emphasis:{
shadowBlur:10,
shadowOfftX:0,
shadowColor:'rgba(0, 0, 0, 0.5)',//⿏标放在区域边框颜⾊
textColor:'#000'
作者江南}//⿏标放在各个区域的样式
},
data:[{name:"其他",fenbi:"32.90%",value:102},{name:"股权投融资委员会",fenbi:"21.29%",value:66},{name:"银⾏与保险",fenbi:"11.61%",valu e:36},{name:"复星蜂巢",fenbi:"8.06%",value:25},{name:"科技与⾦融",fenbi:"7.74%",value:24},{name:"⼤快乐",fenbi:"7.10%",value:22},{name:"智能制造与⼤宗",fenbi:"6.77%",value:21},{name:"⼤健康",fenbi:"4.52%",value:14}],//数据，注意这⾥数据格式⼀定，数据中其他属性，查阅⽂档
color:['#7A3409','#AE621A','#D76C01','#F29D47','#FFDB7A','#FFF37A','#FF6464','#424242'],//各个区域颜⾊
},//数组中⼀个{}元素，⼀个图，以此可以做出环形图
},//数组中⼀个{}元素，⼀个图，以此可以做出环形图
{
name:'外边框',
type:'pie',
clockWi:fal,//顺时加载
hoverAnimation:fal,//⿏标移⼊变⼤
center:['50%','50%'],
radius:['45%','45%'],
label:{面盆水龙头
normal:{
show:fal
}
},
data:[{
value:0,
name:'',
itemStyle:{
normal:{
borderWidth:1,
borderColor:'#B8B8B8'
}
}
}]
}
],//系列列表
}
}
},
methods:{
changeOption(){
const data =this.option.ries[0].data
/
/ 随机更新⽰例数据
data.forEach((item, index)=>{
data.splice(index,1, Math.random()*40)
})
},
onViewClick(options){
console.log(options)
}
}
}
</script>
<script module="echarts" lang="renderjs">
let myChart
export default{
name:'pieChartLabel',
mounted(){
if(harts ==='function'){
this.initEcharts()
}el{
// 动态引⼊较⼤类库避免影响页⾯展⽰
const script = ateElement('script')
// view 层的页⾯运⾏在 www 根⽬录，其相对路径相对于 www 计算 script.src ='static/echarts.js'
document.head.appendChild(script)
}
},
methods:{
initEcharts(){
myChart = echarts.ElementById('pieChartLabel')) // 观测更新的数据在 view 层可以直接访问到
myChart.tOption(this.option)
},
// updateEcharts(newValue, oldValue, ownerInstance, instance) {
// updateEcharts(newValue, oldValue, ownerInstance, instance) {
// // 监听 rvice 层数据变更
// myChart.tOption(newValue)
// },
onClick(event, ownerInstance){
// 调⽤ rvice 层的⽅法
ownerInstance.callMethod('onViewClick',{
test:'test'
})
}
}
}
</script>
3.最后css代码
<style scoped>
.content{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.echarts{
width: 690rpx;
height: 400rpx;
}
</style>
<
↓↓↓ 个⼈写的⼀个公众号，还在完善中 ，欢迎加⼊↓↓↓ | ·)✧ ↓↓↓
