vue+百度echarts做一个饼图

674 ℃

vue+百度echarts做一个饼图

在vue项目开发中如何利用百度echarts做一个饼图数据分析图,下面web建站小编给大家简单介绍一下具体实现代码,如右图!

1、在需要的页面引入

复制代码import * as echarts from 'echarts'

//如果没有安装,根据提示安装echarts
  • 1
  • 2
  • 3

2、实现代码如下:

复制代码drawPie() {
  var myindex = 0
  var colorArr = [
    {
      c1: '#3266f6',
      c2: '#661dcf'
    },
    {
      c1: '#ec489e',
      c2: '#fdae40'
    },
    {
      c1: '#4b96e0',
      c2: '#4fdac5'
    },
    {
      c1: '#4fabda',
      c2: '#1395d8'
    }
  ]
  let myPieChart = echarts.init(document.getElementById('pies'))
  myPieChart.setOption({
    title: {
      text: ''
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}个 ({d}%)'
    },
    legend: {
      top: '10%',
      itemGap: 10 //图例之间间距
    },
    series: {
      name: '近三十天访问统计',
      type: 'pie',
      silent: true,
      radius: ['0', '75%'],
      center: ['50%', '55%'],
      avoidLabelOverlap: false,
      minAngle: 15, //最小角度
      zlevel: 1,
      itemStyle: {
        normal: {
          color: function(params) {
            let colorList = colorArr
            return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                offset: 0,
                color: colorList[params.dataIndex].c1
              },
              {
                offset: 1,
                color: colorList[params.dataIndex].c2
              }
             ])
           }
          }
        },
        label: {
          normal: {
            show: true,
            position: 'inner',
            formatter: '{b}:{d}%\n{c}',
            lineHeight: 15,
            color: '#fff'
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: [
          { name: '学习', value: 300 },
          { name: '资料', value: 500 },
          { name: '下载', value: 200 }
        ]
      }
   })
},
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82

百度echarts雷达图radar根据分数点显示每个不同颜色

百度ECharts文档官网介绍

百度echarts柱状图设置不同颜色(每根柱子一种颜色)

百度echarts图表数据为空如何展示"暂无数据"

百度echarts柱状图/折线图x轴显示全部文本(太长自动换行)

标签: 百度echarts, 饼图

上面是“vue+百度echarts做一个饼图”的全面内容,想了解更多关于 js 内容,请继续关注web建站教程。

当前网址:https://m.ipkd.cn/webs_3692.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

新手做网站优化页面静态化好吗?
注册一个新域名需要从哪些方面考虑?
织梦dede数据库类常用操作函数getone()、Execute()剖
vue点击按钮如何防止重复请求
简单介绍前端开发清除页面缓存的几种方法