基于echarts的饼状图
echarts本人也是用的很少的了，有缘碰到公司在用，于是便熟悉熟悉。这里就指出一些日常简单参数和图形做参考。
来看看效果图吧！
1.先上vue下的HTML
<template>
<view class="content">
<view @click="echarts.onClick" :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: false,
trigger: 'item',
formatter: "{b}:{d}%",
/*formatter:function(val){ //让series 中的文字进行换行
console.log(val);//查看val属性，可根据里边属性自定义内容
var content = var['name'];
return content;//返回可以含有html中标签
},*/ //自定义鼠标悬浮交互信息提示，鼠标放在饼状图上时触发事件
}, //提示框，鼠标悬浮交互时的信息提示
graphic: {
type: 'text',
left: 'center',
top: 'center',
style: {
text: this.centerTitle + '\n\n' + this.centerunit, //使用“+”可以使每行文字居中
textAlign: 'center',
font: '12px cursive',
fill: '#A3A9AF',
width: 30,
height: 30
}
}, //此例饼状图为圆环中心文字显示属性，这是一个原生图形元素组件，功能很多
series: [{
name: '', //tooltip提示框中显示内容
type: 'pie', //图形类型，如饼状图，柱状图等
radius: ['50%', '65%'], //饼图的半径，数组的第一项是内半径，第二项是外半径。支持百分比，本例设置成环形图。具体可以看文档或改变其值试一试
//roseType:'area',是否显示成南丁格尔图，默认false
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) { //让series 中的文字进行换行
return val.name.split("-").join("\n");
}*/
} //饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档
}, //基本样式
emphasis: {
shadowBlur: 10,
shadowOffsetX: 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%",value: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',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
center: ['50%', '50%'],
radius: ['45%', '45%'],
label: {
normal: {
show: false
}
},
data: [{
value: 0,
name: '',
itemStyle: {
normal: {
borderWidth: 1,
borderColor: '#B8B8B8'
}
}
}]
}
], //系列列表
}
}
},
methods: {
changeOption() {
const data = this.option.series[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 (typeof window.echarts === 'function') {
this.initEcharts()
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
script.src = 'static/echarts.js'
script.onload = this.initEcharts.bind(this)
document.head.appendChild(script)
}
},
methods: {
initEcharts() {
myChart = echarts.init(document.getElementById('pieChartLabel'))
// 观测更新的数据在 view 层可以直接访问到
myChart.setOption(this.option)
},
// updateEcharts(newValue, oldValue, ownerInstance, instance) {
// // 监听 service 层数据变更
// myChart.setOption(newValue)
// },
onClick(event, ownerInstance) {
// 调用 service 层的方法
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><
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
