美文网首页
echart 多图例随机生成颜色

echart 多图例随机生成颜色

作者: 逸笛 | 来源:发表于2021-10-11 10:07 被阅读0次

    效果:


    6619704-7d487cd345ea687e.png
    <script>
    export default {
      name: 'Index',
      data () {
        return {
        option5: {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              left: 'center'
            },
            series: [
              {
                name: '飞猫盘VIP收入',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['50%', '53%'],
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '28',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: []
              }
            ]
          },
        }
      },
    }
    </script>
    
        // 随机生成颜色
        handleColors () {
          let color = ''
          let r = Math.floor(Math.random() * 256)
          let g = Math.floor(Math.random() * 256)
          let b = Math.floor(Math.random() * 256)
          color = `rgb(${r},${g},${b})`
          return color// 所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
        },
    

    datalist 为接口返回的数据列表


    图片.png
     let colorArr = []
                        datalist.forEach((item, index) => {
                          colorArr[index] = this.handleColors()
                        })
    //赋值给图片的图例颜色数组
                        this.option5.color = colorArr
    

    相关文章

      网友评论

          本文标题:echart 多图例随机生成颜色

          本文链接:https://www.haomeiwen.com/subject/ctlloltx.html