vue项目中echarts渐变色设置

最新推荐文章于 2024-07-31 00:25:36 发布

后续～

最新推荐文章于 2024-07-31 00:25:36 发布

阅读量629

点赞数

文章标签： vue.js echarts javascript

本文链接：https://blog.csdn.net/moment_qiao/article/details/132016657

版权

主要代码

normal: {
                                    color: function(params) {
                                     var colorList = [
                                    {
                                        c1: ' #fce5ca',  //管理
                                        c2: '#FF9D62'                                                                   
                                    },
                                    {
                                        c1: ' #508DFF',  //实践
                                        c2: '#26C5FE'
                                    },
                                    {
                                        c1: '#63E587',//操作
                                        c2: '#5FE2E4'
                                    }]
                                     return new that.$echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                                            offset: 0,
                                            color: colorList[params.dataIndex].c1
                                        }, {
                                            offset: 1,
                                            color: colorList[params.dataIndex].c2
                                        }])                                    
                                      
                                    }
                                }

完整代码

<template>
  <div>
    <div id="myChart" :style="{width: '200px', height: '3200px'}"></div>
  </div>
</template>
<script>
import Vue from "vue";
export default {
  name: "component",
  data() {
    return {};
  },

  mounted() {
    this.drawChart();
  },

  methods: {
//图表
    drawChart() {
    let that=this;
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {},
        series: [
          {
            name: "demo",
            type: "pie",
            radius: "55%",
            center: ["40%", "50%"],
            data: [
            { value: 1, name: "苹果" },
            { value:2, name: "香蕉" },
            { value: 3, name: "橘子" }
          ],

            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              },

              normal: {
                color: function(params) {
                 //渐变色列表，自定义自己需要的颜色
                  var colorList = [    
                    {
                      c1: "#5eae72", 
                      c2: "#5391f1"
                    }, {
                      c1: " #f00", 
                      c2: "#fff"
                    },{
                      c1: "#fea10f", 
                      c2: "#fa8013"
                    }
                  ];

                  return new that.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                      offset: 0,
                      color: colorList[params.dataIndex].c1
                    },{
                      offset: 1,
                      color: colorList[params.dataIndex].c2
                    }
                  ]); 
                }
              }
            }
          }
        ]
      });
    }
  }
};

</script>