美文网首页
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