echarts饼状图引导线左右对称渐变、引导线上文字左右对齐（Vue实现）

最新推荐文章于 2024-05-06 21:45:59 发布
最新推荐文章于 2024-05-06 21:45:59 发布
阅读量4.1k 收藏 17
点赞数
分类专栏： 前端学习 文章标签： js echarts vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42077503/article/details/112478212
版权

效果图：
在这里插入图片描述
在这里插入图片描述
大致思路：
平时看echart是官网的例子大多数都是在option里面直接添加属性，但是如果想要达到每一条数据的样式都不一样采用这种方式是无法实现的。
其实可以通过series.data等于一个属性的对象来实现。
提示:该demo数据最多8条
option：

var option = {
        tooltip: {},
        series: [
          {
            type: 'pie',
            radius: [45, 75],
            roseType: 'area',
            height: '205px',
            clockwise: false,
            data: this.dataObj,  // 重点看这里
            label: { // 文字
              color: '#ffffff',
              fontWeight: 12,
              fontFamily: 'SegoeUI',
              // align: 'right',
              alignTo: 'labelLine',
              // formatter: '{d}%\n{b}',
              padding: [0, -30],
              formatter: [
                '{a|{d}%}',
                '{b|{b}}'
              ].join('\n'),
              rich: {
                a: {
                  color: '#ffffff',
                  fontWeight: 14,
                  fontFamily: 'SegoeUI-Semibold',
                  width: 1,
                  align: 'center',
                  padding: [0, 0, 5, 0]
                },
                b: {
                  color: '#ffffff',
                  fontWeight: 12,
                  fontFamily: 'SegoeUI',
                  align: 'center',
                  width: 1,
                  padding: [5, 0, 0, 0]
                }
              }
            },
            labelLine: { // 引导线
              length2: this.length,
              lineStyle: {
                // color: '#ffffff',
                width: 1,
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: '#FFFFFF' // 0% 处的颜色
                  }, {
                    offset: 0.5, color: 'rgba(255,255,255,0.2)' // 100% 处的颜色
                  }, {
                    offset: 1, color: '#FFFFFF' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                },
                opacity: 0.5
              }
            },
            itemStyle: { // 饼状部分
              color: (seriesIndex) => {
                return this.color[seriesIndex.dataIndex]
              }
            }
          }
        ]
      }

这部分主要功能是设置了一些公共的属性以及默认的引导线样式
dataObj：

this.dataObj = []
      var num = this.data.length
      var line = Math.ceil(num / 2)
      this.length = this.lengthArr[num - 1]
for (var i = 0; i < this.data.length; i++) {
        var temp = {}
        if (i < line) {
          temp = {
            value: this.data[i],
            name: this.name[i],
            labelLine: {
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [{
                    offset: 1, color: 'rgba(255,255,255,0.6)' // 0% 处的颜色
                  }, {
                    offset: 0.8, color: 'rgba(255,255,255,0.3)' // 100% 处的颜色
                  }, {
                    offset: 0.4, color: 'rgba(255,255,255,0.1)' // 100% 处的颜色
                  }, {
                    offset: 0.2, color: this.endColor[i] // 100% 处的颜色
                  }, {
                    offset: 0, color: this.endColor[i] // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              }
            },
            label: {
              rich: {
                a: {
                  color: '#ffffff',
                  fontWeight: 14,
                  fontFamily: 'SegoeUI-Semibold',
                  width: 1,
                  align: 'center',
                  padding: [0, 0, 5, 0]
                },
                b: {
                  color: '#ffffff',
                  fontWeight: 12,
                  fontFamily: 'SegoeUI',
                  align: 'left',
                  width: 1,
                  padding: [5, 0, 0, -20]
                }
              }
            }
          }
        } else {
          temp = {
            value: this.data[i],
            name: this.name[i],
            labelLine: {
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [{
                    offset: 1, color: this.endColor[i] // 0% 处的颜色
                  }, {
                    offset: 0.8, color: this.endColor[i] // 100% 处的颜色
                  }, {
                    offset: 0.6, color: 'rgba(255,255,255,0.1)' // 100% 处的颜色
                  }, {
                    offset: 0.2, color: 'rgba(255,255,255,0.3)' // 100% 处的颜色
                  }, {
                    offset: 0, color: 'rgba(255,255,255,0.6)' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              }
            },
            label: {
              rich: {
                a: {
                  color: '#ffffff',
                  fontWeight: 14,
                  fontFamily: 'SegoeUI-Semibold',
                  width: 1,
                  align: 'center',
                  padding: [0, 0, 5, 0]
                },
                b: {
                  color: '#ffffff',
                  fontWeight: 12,
                  fontFamily: 'SegoeUI',
                  align: 'right',
                  width: 1,
                  padding: [5, -20, 0, 0]
                }
              }
            }
          }
        }
        this.dataObj.push(temp)
      }

这部分主要是通过总数来判断数据的引导线会出现在左侧还是右侧，然后赋予不同的样式。
完整代码:

<template>
  <div id="illegalActivitiesEcharts" style="width: 110%;height:280px;" class="echarts"></div>
</template>

<script>
export default {
  arr: 'illegalActivitiesStatisticsForm',
  data () {
    return {
      color: ['#D4302F', '#81DFEA', '#4DD0E2', '#29B6F7', '#06A9F4', '#029CE5', '#0388D2', '#01579B'], // 第一个是红色，代表数量最多的违法行为
      endColor: ['#F44336', '#81DFEA', '#4DD0E2', '#29B6F7', '#06A9F4', '#029CE5', '#0388D2', '#01579B'], // 末端的颜色
      length: 118, // 不同数量下的引导线长度
      lengthArr: [100, 110, 123, 135, 115, 110, 110, 118],
      dataObj: [] // series数据
    }
  },
  props: {
    data: Array,
    name: Array
  },
  watch: {
    data () {
      this.getData()
      this.drawLine()
    }
  },
  methods: {
    drawLine () {
      var echarts = require('echarts')
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('illegalActivitiesEcharts'))

      // 指定图表的配置项和数据
      var option = {
        tooltip: {},
        series: [
          {
            type: 'pie',
            radius: [45, 75],
            roseType: 'area',
            height: '205px',
            clockwise: false,
            data: this.dataObj,
            label: { // 文字
              color: '#ffffff',
              fontWeight: 12,
              fontFamily: 'SegoeUI',
              // align: 'right',
              alignTo: 'labelLine',
              // formatter: '{d}%\n{b}',
              padding: [0, -30],
              formatter: [
                '{a|{d}%}',
                '{b|{b}}'
              ].join('\n'),
              rich: {
                a: {
                  color: '#ffffff',
                  fontWeight: 14,
                  fontFamily: 'SegoeUI-Semibold',
                  width: 1,
                  align: 'center',
                  padding: [0, 0, 5, 0]
                },
                b: {
                  color: '#ffffff',
                  fontWeight: 12,
                  fontFamily: 'SegoeUI',
                  align: 'center',
                  width: 1,
                  padding: [5, 0, 0, 0]
                }
              }
            },
            labelLine: { // 引导线
              length2: this.length,
              lineStyle: {
                // color: '#ffffff',
                width: 1,
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: '#FFFFFF' // 0% 处的颜色
                  }, {
                    offset: 0.5, color: 'rgba(255,255,255,0.2)' // 100% 处的颜色
                  }, {
                    offset: 1, color: '#FFFFFF' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                },
                opacity: 0.5
              }
            },
            itemStyle: { // 饼状部分
              color: (seriesIndex) => {
                return this.color[seriesIndex.dataIndex]
              }
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    getData () {
      this.dataObj = []
      var num = this.data.length
      var line = Math.ceil(num / 2)
      this.length = this.lengthArr[num - 1]
      for (var i = 0; i < this.data.length; i++) {
        var temp = {}
        if (i < line) {
          temp = {
            value: this.data[i],
            name: this.name[i],
            labelLine: {
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [{
                    offset: 1, color: 'rgba(255,255,255,0.6)' // 0% 处的颜色
                  }, {
                    offset: 0.8, color: 'rgba(255,255,255,0.3)' // 100% 处的颜色
                  }, {
                    offset: 0.4, color: 'rgba(255,255,255,0.1)' // 100% 处的颜色
                  }, {
                    offset: 0.2, color: this.endColor[i] // 100% 处的颜色
                  }, {
                    offset: 0, color: this.endColor[i] // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              }
            },
            label: {
              rich: {
                a: {
                  color: '#ffffff',
                  fontWeight: 14,
                  fontFamily: 'SegoeUI-Semibold',
                  width: 1,
                  align: 'center',
                  padding: [0, 0, 5, 0]
                },
                b: {
                  color: '#ffffff',
                  fontWeight: 12,
                  fontFamily: 'SegoeUI',
                  align: 'left',
                  width: 1,
                  padding: [5, 0, 0, -20]
                }
              }
            }
          }
        } else {
          temp = {
            value: this.data[i],
            name: this.name[i],
            labelLine: {
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [{
                    offset: 1, color: this.endColor[i] // 0% 处的颜色
                  }, {
                    offset: 0.8, color: this.endColor[i] // 100% 处的颜色
                  }, {
                    offset: 0.6, color: 'rgba(255,255,255,0.1)' // 100% 处的颜色
                  }, {
                    offset: 0.2, color: 'rgba(255,255,255,0.3)' // 100% 处的颜色
                  }, {
                    offset: 0, color: 'rgba(255,255,255,0.6)' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              }
            },
            label: {
              rich: {
                a: {
                  color: '#ffffff',
                  fontWeight: 14,
                  fontFamily: 'SegoeUI-Semibold',
                  width: 1,
                  align: 'center',
                  padding: [0, 0, 5, 0]
                },
                b: {
                  color: '#ffffff',
                  fontWeight: 12,
                  fontFamily: 'SegoeUI',
                  align: 'right',
                  width: 1,
                  padding: [5, -20, 0, 0]
                }
              }
            }
          }
        }
        this.dataObj.push(temp)
      }
    }
  },
  mounted () {
    this.getData()
    this.drawLine()
  }
}
</script>

<style scoped>
.echarts {
  position: relative;
  top: 24px;
  right: 20px;
}
</style>
魈傩
关注
  • 0
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
vue2.0 自定义 饼状图 (Echarts)组件的方法
08-27
在 Vue 2.0 中，创建自定义饼状图 (Echarts) 组件可以实现灵活的数据可视化。下面，我们将创建一个自定义的饼状图组件，使用 Echarts 库来绘制饼状图。 组件结构 首先，我们需要创建一个名为 `Echarts.vue` 的组件...
echarts实现3D环装饼图带引导线效果
01-25
echarts实现3D环装饼图带引导线效果，可以调整引导线上展示的内容在一侧还是分为两侧。
echarts 饼状图 调整位置
热门推荐
yinyueyu007的博客
09-01 2万+
通过调整 center 按照百分比调整位置 series: [{ name: '圆环图系列名称', // 系列名称 type: 'pie', // 系列类型 left: '0%', center: ['24%', '50%'], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ] radius: ['30%', '40%']
echarts双正x轴条形图
winne雪
10-23 9423
一、效果图： 二、配置代码 let option = { title: { text: 'TOP10' }, tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'...
echars设置渐变颜色的方法
最新发布
m0_75269526的博客
05-06 556
ecahrs设置渐变，echars渐变，echars实现渐变效果,折线图,柱状图，面积图，渐变在我们日常的开发中，难免会遇到有需求，需要使用echars设置渐变的图表，
echarts实现颜色渐变的环状图（包括自定义各种配置项的属性）
hzxOnlineOk的博客
10-16 1641
实现效果： 实现代码： option = { color: [new echarts.graphic.LinearGradient(1, 1, 0, 0, [{ offset: 0, color: '#F2A635' }, { offset: 0.9, color: '#ffffff' }]), new echarts.graphic.LinearGradient(1, 1, 0, 0, [{.
echarts饼状图(指示线、提示文字、分区样式)
qq_30351747的博客
11-02 1万+
echarts饼状图(指示线、提示文字、分区样式) option={ tooltip: { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, series: [{ name: '', type: 'pie', radius: ['50%', '70%'], labelLine:{ normal:{
Echarts 柱状图上下对称
dsj_0516的博客
08-02 2379
varxAxisData=[]; vardata1=[]; vardata2=[]; vardata3=[]; vardata4=[]; for(vari=0;i<180;i++){ xAxisData.push('Class'+i); data1.push((Math.random()*2).toFixed(2)); data2.push(-Math.random().toFixed(2)); ...
Vue Echarts实现可视化世界地图代码实例
11-28
Echarts实现可视化世界地图模拟迁徙，以我自己开发过程。 下载Echarts依赖： npm install echarts 成功以后引入依赖： import echarts from 'echarts' peopleInsertCharts为生成echarts容器。 let myChart = ...
vue实现简易图片左右旋转,上一张,下一张组件案例
10-15
主要介绍了vue实现简易图片左右旋转,上一张,下一张组件案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue+echarts实现动态折线图的方法与注意
10-14
在Vue.js框架中结合ECharts库创建动态折线图，主要涉及到以下几个关键步骤和技术要点： 1. **引入ECharts库**： 在项目中安装ECharts依赖，可以通过npm或yarn进行安装： ``` npm install echarts ``` 2. **在...
怎么让ECharts饼图的label标签不重叠?
JackChan
04-13 2266
怎么让ECharts饼图的label标签不重叠?
echarts饼图图例和图表分布在两侧，图例文字对齐，自定义图例，自定义饼图展示位置，echarts饼图展示在盒子右侧
weixin_45631278的博客
04-07 7180
const dataList = [{ title: '正常文字多的', key: 'normal', rate: '1' }, { title: '调', key: 'debugger', rate: '2' }, { title: '停', key: 'stop', rate: '3' }, { title:.
Echarts 如何配置颜色渐变
qq_43225508的博客
09-24 4365
Echarts 如何配置颜色渐变
echarts laben 饼图指示线条+文字颜色继承
weixin_51747411的博客
08-09 1385
echarts lebel 线条以及文字颜色描述
echarts饼状曲线图，中间显示总数
vanora1111的博客
04-11 1万+
记录一下吧 今天在工商银行理财app也看到了这个饼，觉得应用场景还挺多的。记是记不住的，那就写下来吧！需要实现的效果如下： 我直接在echarts官网改的。下面贴代码： import * as echarts from 'echarts'; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; var datas = [ ////////.
echarts之饼图制作+标示线
Heartnottowake的博客
04-21 6810
1，安装echarts组件 npm install echarts -s 2，在main.js中全局引入以及挂载 import echarts from 'echarts';//引入 Vue.prototype.$echarts = echarts;//挂载 也可以直接在new Vue里面添加挂载或者Vue.use(echarts); 三种都是挂载，都可以用 3,然后我们回到组件中，一种是组件全局引入 （写在组件的script部分的最开始，引入嘛） import * as echarts from
ECharts图表的图例对齐问题（自定义宽高）
guizai_jianchi的博客
04-03 6178
先上效果图： 配置项legend.width可设置图例组件的宽度，但是按照官方的去设置发现效果不对劲，会变成纵向居中（也许还有其他效果不多说）， 解决方法如下： 利用富文本legend.textStyle.rich和legend.formatter设置样式 legend: { //图例 orient:...
word饼图如何画引导线_Echarts | 饼图引导线文字样式的调整
weixin_33800919的博客
01-13 986
设计图![image](https://upload-images.jianshu.io/upload_images/14188382-6ca314f6a4ea1289.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)没改之前![image](https://upload-images.jianshu.io/upload_images/...
在vue中实现echarts饼状图的步骤
05-04
实现echarts饼状图的步骤如下： 1. 安装echarts库 在Vue项目中使用echarts，需要先安装echarts库。可以通过命令行工具在项目根目录下执行以下命令进行安装： ``` npm install echarts --save ``` 2. 引入echarts...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值