一、需求:选项值及数量从后台取值,一个选项对应一个颜色选择器。图例选项【男,女】。
二、实现:
1、html:
<template>
<div>
<div class="pic_content" id="pie"></div>
<div>
<el-button>下载</el-button>
<el-button>数值</el-button>
<el-popover
placement="right"
width="100"
trigger="click"
class="setcolor"
>
<el-color-picker
v-model="item.color"
v-for="(item,index) in pic_datas"
@change="change_color(item)">
</el-color-picker>
<el-button slot="reference">配色</el-button>
</el-popover>
</div>
</div>
</template>
2、script:
<script>
var pic_data=[
{ value: 50, name: '男',color:'#ca9999',index:0},
{ value: 50, name: '女',color:'#98b0e1',index:1},
]
export default {
name:"pie",
data(){
return{
color1:'red',
//图表值
pic_datas:pic_data,
}
},
mounted() {
this.getechart();
},
methods:{
//初始化图表
getechart(){
let _this=this;
//为图表取值
let color_arr=[];
for(let i=0;i<_this.pic_datas.length;i++){
color_arr[i]=_this.pic_datas[i].color;
};
var pie = this.$echarts.init(document.getElementById('pie'));
var option = {
title: {
left: 'center'
},
tooltip: {
trigger: 'item'
},
color:color_arr,
series: [
{
name: '占比',
type: 'pie',
radius: '50%',
data:this.pic_datas,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
}
}
}
]
};
option && pie.setOption(option);
},
//更改图表配色
change_color(val){
pic_data[val.index].color=val.color;
this.getechart();
},
}
}
</script>
3、css:
略
4、效果:
3、注意:图表值pic_datas定义了一个全局变量赋值,因为直接在data里赋值,当改变值的时候会因为此值被循环而报可能会无限循环的错误。引入echarts等步骤就省啦