Echarts饼图实现圆形柱图

一、代码简介

本次主要是在Vue web项目中，利用Echarts中的饼图组件实现圆形柱状图

二、功能预览

三、示例代码

<template><div id="echartsPie" style="width: 450px;height: 450px"></div>
</template><script>import Echarts from 'echarts'//导入Echarts组件export default {name: "echartsPie",data() {return {chart: null}},methods: {echartsPieInit(){// 初始化echarts实例this.chart = Echarts.init(document.getElementById('echartsPie'));this.chart.setOption({ // 通过setOption来生成饼图tooltip: {//提示框组件show: true,//触发类型[item-数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用]trigger: 'item',formatter: "{a}:{c}({d}%)"//提示框格式器。//饼图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）},series: [//系列列表。每个系列通过 type 决定自己的图表类型{name:'A',//系列名称type:'pie',//饼图hoverAnimation: false,//是否开启hover(悬停)在扇区上的放大动画效果radius: ['30%', '40%'],//饼图的半径,第一项是内半径，第二项是外半径labelLine: {//标签的视觉引导线normal: {show: false}},data:[//系列中的数据内容数组{value:65,itemStyle:{normal:{color:'#00FFFF'//柱图显示颜色}}},{value:35,itemStyle:{normal:{color:'RGBA(0,186,255,0)'//柱图透明色}}}]},{name:'B',type: 'pie',hoverAnimation: false,radius: ['50%', '60%'],labelLine: {normal: {show: false}},data:[{value:50,itemStyle:{normal:{color:'#00FFFF'}}},{value:50,itemStyle:{normal:{color:'RGBA(0,186,255,0)'}}}]},{name:'C',type:'pie',hoverAnimation: false,radius:['70%','80%'],labelLine: {normal: {show: false}},data:[{value:60,itemStyle:{normal:{color:'#00FFFF'}}},{value:40,itemStyle:{normal:{color:'RGBA(0,186,255,0)'}}}]},{name:'D',type:'pie',hoverAnimation: false,radius:['90%','100%'],labelLine: {normal: {show: false}},data:[{value:70,itemStyle:{normal:{color:'#00FFFF'}}},{value:30,itemStyle:{normal:{color:'RGBA(0,186,255,0)'}}}]}]})}},mounted() {this.$nextTick(function () {this.echartsPieInit()})}}
</script><style scoped></style>

四、附录

在Vue项目中，可以使用如下命令通过 npm 安装 ECharts

npm install echarts --save

另外【import Echarts from 'echarts'】导入Echarts组件可以用以下代码代替

var echarts = require('echarts');

Echarts饼图实现圆形柱图相关推荐

react echarts 绘制带有滑块柱图
实现效果图如下: 需要具备知识: 1 react 项目创建 2 react组件的导入使用方法:react中引入 TrafficColumnQTI 组件<TrafficColumnQTI /&g ...
Echarts饼图无法切换漏斗图问题处理
项目中有饼状图切换漏斗图的需求,个人实现历程,记录下. 1. 去官网查询饼图如何切换漏斗图: https://www.echartsjs.com/examples/zh/editor.html?c=p ...
echarts象形柱图整体颜色渐变
@独孤求败12138 象形柱图整体颜色渐变 echarts中的象形柱图颜色渐变只能局部内部渐变,但是我想要实现整体渐变,怎么做呢?经过我大量的搜索和官方文档及API的研究,好像并不提供这一功能,那只能 ...
数据量太大怎么办？条形图/柱状图不够用？是时候让径向柱图出手了
柱状图作为最常用的基本图表之一,使用率非常高.但是当分类数据比较多时,柱状图/条形图就会变得又窄又长,有没有一个图表可以展示大数据量的数值比较?同时,如果视觉上吸引人那就更好了!如果你心中有这个疑问, ...
Echarts最简单的折线图、柱图、饼图、仪表盘+sql语句
注:以后所有升级版的图形化显示都在此基础上延伸,打好基础才是硬道理本人小白一枚〜欢迎来讨论一,柱图显示: HTM页面: <html style="height: 100%" ...
百度echart柱图、折线图、饼图、Map类型等类似视图的动态加载数据
这几天接触的一个项目需要使用到百度的echart,所以简单查找并实验了几款比较简单且适用性较广的例子,做了几个简单的Demo,一来是对echart有所了解,二来也是记录一下,方便以后进一步的优化. 首 ...
echarts 3d饼图_echarts构建关系图，节点可收缩和展开，可添加点击事件
echarts下载及使用 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fir ...
echarts绘制各种图表(柱形、折线、柱形、饼图、南丁格尔、环形、中国地图散点图、百度地图散点图、词云图)
文末附带github本文所有源代码,以及bmap.js,china.js,echarts.js,echarts-wordcloud.js文件啦 1.柱形图先来看看效果啦重要代码如下所示,必须引入e ...
echarts实现横向柱图文字在柱图上面
前言: echarts实现横向柱图文字在柱图上面效果图: 实现源代码: <div id="lip" style="width:100%;height:800px; ...

Echarts饼图实现圆形柱图

一、代码简介

二、功能预览

三、示例代码

四、附录

Echarts饼图实现圆形柱图相关推荐

最新文章

热门文章