Vue中使用Echart图表插件之圆环套圈

Echart是一个很好的图表绘制插件，里面有各种各样的图表供我们选择，最近用echart做图表比较多，在接到一个在圆环里面套一个圈的需求时，刚开始我是真的无从下手，毕竟自己用echart的时间也不长，直接看echart官网也看不出个所以然来，最后抱着试一试的态度玩玩看，最后玩出了。

效果图如下：

主要注意的点：

1、创建的画1、创建的画布必须给定大小，不然无法显示，即.chart-box 必须设置大小1、创建的画布必须给定大小，不然无法显1、创建的画布必须给定大小，不然无法显示，即.chart-box 必须设置大小o

2、因为这个圈是自定义的用，相对定位来控制和圆环的位置关系。

3、这里用到了计算属性来计算合格率，但是计算属性有一个缺点是不能传参数，有时候感觉有点不方便吧

废话少说直接上代码，注释也是比较详细的，希望大家能看得懂，不懂的请留言

<template><div class="chart-box"><div class="chart" id="chart" ref="chart"></div><divclass="text-box":style="{background:'linear-gradient(175deg,'+ Color + '0%,rgba(66, 96, 121, 1) 100%)'}"><div class="text-wrap"><div class="pass-rate"><div>合格率</div><div>{{passData}}</div></div></div></div><div class="chart-name">{{data.name}}</div></div>
</template><script>
import echarts from 'echarts'export default {data() {return {data:[{ value: 60, name: '合格' }, { value: 20, name: '不合格' }],Color:'rgba(34, 143, 254, 1)', //由于在在我的项目中把它写成了组件，这个是为了传入颜色改变圆圈的背景色background: '',}},mounted() {this.initChart()},methods: {// 初始化图表样式initChart() {let _this = thisthis.chart = echarts.init(this.$refs.chart)this.chart.setOption({grid: {left: '8%',right: '0',bottom: '1%',containLabel: false,},legend: { //不显示图例show: false,},tooltip: {trigger: 'item',},series: [{name: '',type: 'pie',radius: ['50%', '65%'],avoidLabelOverlap: false,label: {normal: {show: false,position: 'center',textStyle: {fontSize: 14,color: '#fff',},},// 鼠标滑过显示中间文字emphasis: {show: false,textStyle: {fontSize: '14',fontWeight: 'bold',},},},labelLine: {normal: {show: false,},},data: this.data,itemStyle: {color: params => { //为了区别合格和不合格的颜色if (params.dataIndex === 0 || (params.dataIndex === 1 && params.value == 0)) {return _this.Color} else {return 'rgba(62,191,249,0.3)'}},},},],})},},computed: {passData(){let pass = this.data[0].valuelet all = this.data[1].value + this.data[0].valueif (all) {let nun = pass / allreturn (nun * 100).toFixed(2) + '%'} else {return 0}}},
}
</script><style >
.chart-box {position: relative;display: inline-block;width: 270px;height: 200px;white-space: nowrap;color: #fff;background-color: #273c4e;
}
.chart {width: 100%;height: 100%;
}.chart-name {position: relative;text-align: center;top: -90px;
}
.text-box {position: relative;top: -140px;left: 94.5px;width: 83px;height: 83px;border-radius: 100%;}
.text-wrap {position: relative;top: 0.6px;left: 1px;background-color: rgba(39, 60, 78, 1);width: 80px;height: 80px;border-radius: 100%;display: flex;justify-content: center;align-items: center;
}
.pass-rate {width: 80px;text-align: center;
}
</style>

Vue中使用Echart图表插件之圆环套圈相关推荐

vue2.0_在vue中使用echarts图表插件
说明:本例子基于vue-cli脚手架搭建首先,安装echarts依赖 npm install echarts -S 注:安装NodeJS之后,使用npm来安装包使用的是国外的地址,经常会出现超时错误 ...
Vue中使用echarts图表插件
一.安装echarts依赖 npm install echarts -S 或者使用淘宝的镜像 npm install -g cnpm --registry=https://registry.npm.t ...
vue - vue中使用echart实现柱状图和折线图
vue中使用echart实现柱状图和折线图,所用到的数据会放到最后面,在costRate.js里面: 1,先看效果图一些重要注释我都写到代码里面了:第一个图柱状图,第二个是折线图 2,代码实现 &l ...
Vue中使用echart实现中国地图统计图
Vue中使用echart实现中国地图统计图前言 Echart版本的确定全局导入或按需导入在对应的页面调用echart 前后端数据交互注意事项前言在Vue2.x开发中,为了更好地展示某一个时间 ...
vue中使用echart地图
vue中使用echart地图获取湖南的地图数据实现的效果步骤一些方法地图options 总结获取湖南的地图数据 https://gallery.echartsjs.com/editor.h ...
Vue中使echarts图表自适应
Vue中使echarts图表自适应 1.先在main.js中自定义一个全局指令,如下 // 定义全局指令 Vue.directive('resize', { // 使用局部注册指令的方式// 指令的名 ...
vue中使用海康插件实现视频监控-流不稳定导致视频断开前端解决办法
vue中使用海康插件实现视频监控-流不稳定导致视频断开前端解决办法配置和启用海康插件详情看本人博客链接:https://blog.csdn.net/jinglianglove/article/de ...
在vue中使用海康插件实现视频监控,视频直播方法一(RTMP流加Flash加videoJS)
在vue中使用海康插件实现视频监控,视频直播方法一(RTMP流加Flash加videoJS) 第一步用npm装这个几个包 "video.js": "^6.6.0&quo ...
vue中通过monment.js插件来将时间戳转换为常用的时间格式
vue中通过monment.js插件来将时间戳转换为常用的时间格式在项目中很多时候需要展示时间信息,我们一般都是用时间戳来传输时间信息,但是我们在页面展示的话是我们想要的常见格式,比如:2021-4 ...
推荐几个web中常用js图表插件
推荐几个web中常用js图表插件作者:zccst 我自己用过fusioncharts和highchart. jQuery插件有: TufteGraph flot js charts jqchart ...

Vue中使用Echart图表插件之圆环套圈

Vue中使用Echart图表插件之圆环套圈相关推荐

最新文章

热门文章