循环el-color-picker修改echarts饼图配色

最新推荐文章于 2025-05-30 09:06:18 发布

原创最新推荐文章于 2025-05-30 09:06:18 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

vue 同时被 3 个专栏收录

29 篇文章

订阅专栏

elementUI

18 篇文章

订阅专栏

echarts

3 篇文章

订阅专栏

这篇博客介绍了一个Vue项目中使用Echarts创建饼图，并动态改变图表颜色的方法。通过在HTML中嵌入Echarts组件，利用Vue的数据绑定和事件监听，配合el-color-picker选择器，实现了点击按钮弹出颜色选择器更改图表各部分颜色的功能。在`change_color`方法中更新数据并重新初始化图表，确保颜色变化实时反映在图表上。注意，避免在data中直接修改图表值以防止循环引用错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、需求：选项值及数量从后台取值，一个选项对应一个颜色选择器。图例选项【男，女】。
二、实现：

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>