(小小黑科技)vue+echarts实现半圆图表

如何用echarts实现半圆图表?在echarts官方实例倒腾一波,发现官方并没有提供半圆图表的写法,那怎么办呢?官方没提供,但需求还是要实现的。

半圆图表其实就是饼图的一半,那么简单的思路如下:设置一个sum值,用来累计所有要展示的数据的总和,再添加到数据里面,那么整个饼图就可以分成均匀的两半,然后将sum值的数据在饼图里面隐藏,就只剩下半圆。下面上代码:

安装echarts

npm install echarts --save

全局引入、配置

// main.js 文件
import echarts from 'echarts'

Vue.prototype.$echarts = echarts 

全局引入echarts,文件会比较大,我们实现半圆其实只需要饼图,那么建议还是按需引入

// MyChart.vue

import echarts from 'echarts'
// 引入饼图
require('echarts/lib/chart/pie')
// 引入提示框等组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

创建容器

// MyChart.vue    
<div id="myChart" style="width: 400px;height: 400px;"></div>

初始化容器

let pieChart = echarts.init(document.getElementById('myChart'))

// 初始化数据
let data = [{name: '游泳健身', value: 1024}, {name: '学车考驾照', value: 2048}]
let sum = 0

// 放置需要显示的图例(if you need)
let legendData = []

// 循环数据 累计sum值
data.forEach(item => {
    sum += item.value * 1 // *1保证sum值为数值
    legendData.push(item.name)
})

// 给数据加上总数sum 通过颜色及透明度设置不显示
data.push({name: '总数', value: sum, itemStyle: {normal: {color: 'rgba(0, 0, 0, 0)'}}})

// 下面给图例加上配置 都是官方的api
pieChart.setOption({
    tooltip: {
        trigger: 'item',
        // formatter: '{a}<br/>{b}:{c}({d}%)'
        formatter: '{b}:{c}({d}%)'
    },
    legend: {
        orient: 'horizontal', // vertical 设置图例展示方向
        data: legendData
    },
    series: [
        {
            name: '随意啦', // 上面formatter的a,不显示a可不设置
            type: 'pie',
            startAngle: 180, // 重点!这里设置饼图从180°初渲染,刚好从上下将饼图平分成两部分 
            radius: ['50%', '60%'],
            center: ['50%', '60%'],
            data: data,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
})

配置完毕,来对比一下:

配置之前(环形):

配置之后:

哈哈,半圆就已经出来了,但是不是已经完美了呢?我们把鼠标覆盖上其中一个数据试试:

吃惊!果然有问题,这里因为我们给数据加上了一条{name: '总数', value: sum}这样总的数据,所以图表统计的时候,其它数据占比就是原来比例的50%!那要怎么处理呢?formatter了解一下。

将原来的formatter改造:

// 原先的formatter
formatter: '{b}:{c}({d}%)'

// 改造formatter
formatter: function (param) {
    let str = ''
    let c = (param['value'] / sum) * 100 // 算出百分比
    c = c.toFixed(2)
    str = str + c + '%'
    return str
}

看下效果图:

nice!改造成功。但这里还有一个小小的问题,那就是把鼠标覆盖上被隐藏那部分圆形的时候,还是会有提示显示:

这里的一个处理就是,当我们在添加最后这一条总数据的时候,把它的tooltip设置为空就行了

data.push({name: '总数', value: sum, tooltip: {formatter: () => ''}, itemStyle: {normal: {color: 'rgba(0, 0, 0, 0)'}}})

最后,该渲染方法应该放在vue的mounted生命周期里,当dom渲染后再初始化容器

mounted () {
    this.drawPie()
},
methods: {
    drawPie () {
        ...
    }
}

OK,这样就大功告成了!

吐槽:晚上改完的图表,隔天早上领导就说还是换回环形图展示吧(・`ω´・)

原文链接:segmentfault.com

上一篇:adbkit-logcat
下一篇:adbkit

相关推荐

  • 🚩Vue源码——组件如何渲染成最终的DOM

    最近参加了很多场面试,几乎每场面试中都会问到Vue源码方面的问题。在此开一个系列的专栏,来总结一下这方面的经验,如果觉得对您有帮助的,不妨点个赞支持一下呗。 前言 Vue有两个核心思想,一个是数据...

    3 天前
  • 🔥基于vue3.0.1 beta搭建仿京东淘宝的电商商城项目!

    前言 就在前段时间,vue官方发布了3.0.0-beta.1 版本,趁着五一假期有时间,就把之前的一个电商商城的项目,用最新的Composition API拿来改造一下! 👉GitHub地址请访问�...

    5 个月前
  • 🍊仿Element自定义Vue组件库

    前言 🍊 市面上目前已有各种各样的UI组件库,他们的强大毋庸置疑。但是有时候我们有必要开发一套属于自己团队的定制化组件库。还有时候原有的组件不能满足我们的各种需求,就需要在原有的组件上进行改造...

    2 个月前
  • 🌓vue页面换肤实践

    前言 最近要做一个换肤的功能,不过只是对一个页面换肤,换一下背景图呀,背景、边框、字体颜色呀之类的,并非整个项目换肤,相对比较简单,所以以下介绍的换肤方法仅适用于页面换肤而非整个项目换肤。

    17 天前
  • (源码分析)为什么 Vue 中 template 有且只能一个 root ?

    引言 今年,疫情并没有影响到各种面经的正常出现,可谓是络绎不绝(学不动...)。然后,在前段时间也看到一个这样的关于 Vue 的问题,为什么每个组件 template 中有且只能一个 root? 可能...

    5 个月前
  • (小白篇)vue-cli3.0创建项目+引入element-ui

    vue-cli在2018年8月份发布了3.0版本,经过重构之后,可以说是一个船心版本! 在项目都落地之后,就想升级一下cli版本,尝一尝3.0带来的舒适,也是为后面项目的开展做一个准备。

    1 年前
  • (原创)vue-router的Import() 异步加载模块问题的解决方案

    关注不迷路,如果解决了问题,留下个赞。 1、问题现象 2、出现问题的代码点 3、替代方案: 把import() 替换成如下: Promise.resolve().then(()=&...

    4 个月前
  • (vue框架)为element组件赋初始值以后无法更改值得问题

    情况描述:组件未加载时已有初始值,mounted里面加载数据,赋值,渲染以后,组件无法更改内容 data里面已经有这个表单对象的初始值但还是无法修改,之前有过一次,没有给表单绑定对象,所以赋值以后无法...

    1 年前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包安装,二到淘宝cpm镜像查看cpm镜像命令:npm install -g cnpm --registry=http...

    1 年前
  • (vuejs学习)1、Vue初上手(*)

    参考《官方》官方: Node 版本要求: Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 ...

    1 年前

官方社区

扫码加入 JavaScript 社区