echarts使用之饼图

公司数据可视化项目需要大量的用到echarts图表，今天总结下饼图的使用。
参照echarts官方文档，三步走

1、引入echarts ：import echarts from “echarts”;
2、准备一个盒子
3、初始化echarts模型
下面是完整的代码

<template><div class="pie-chart"></div>
</template>
<script>
import echarts from "echarts";//引入
export default {name:"PieChart",props:["title","radius","monitoringData"],//通过props传饼图的标题、空心大小、数据data(){return{pieChart:"",}},mounted(){this.initPieChart();},methods:{initPieChart(){let _this=this;_this.pieChart=echarts.init(_this.$refs.pieChart,null,{render:"svg"// 使用SVG,避免页面缩放造成的模糊})let pieOption = {//标题样式title: {text: _this.title[0],left: "left",top: "top",padding: 10,bottom:"20%",textStyle: {color: "#A0ADBC",fontSize: 14}},//鼠标移入文字样式tooltip: {trigger: "item",formatter: "{a} <br/>{b} : {d}%"},grid: {left:'20%',right: '10%',// bottom: '5%',},// 设置饼图的颜色，会根据数据条数自动渲染color: ["#91C8E0","#B0D586","#69C1C2","#D9A175","#419BCC","#B1D5E0","#539AF1","#49B4E3","#71C075","#EECC5D",                ],//文本标签label:{formatter:"{b}：{d}%",//显示格式:{a}：系列名.{b}：数据名.{c}：数据值.{d}：百分比position:'outer',alignTo:'labelLine',bleedMargin:30},//系列列表，每个系列通过 type 决定自己的图表类型//line折线、pie饼图、bar柱状图，这几个比较常用series: [{name: "监测事件",type: "pie",radius: [_this.radius, "50%"],//改属性可以设置空心饼图center: ["50%", "50%"],data:_this.monitoringData,}]};_this.pieChart.setOption(pieOption);window.addEventListener("resize",function(){_this.pieChart.resize();})},}
}
</script>
<style lang="less">
.pie-chart{width: 100%;height: 100%;display: flex;
}
</style>

在这个饼图的绘制过程中我一直想要文本标签超出隐藏，找了很久的配置项，像是标签的对齐方式alignTo、文字边距margin、文字的出血线大小，超过出血线的文字将被裁剪为 '…'bleedMargin，只是万万没想到把整个label属性注释了就好了，，，，我晕~~~

echarts使用之饼图相关推荐

前端vue显示柱状图_Vue接入Echarts 显示柱状图饼图
Vue接入Echarts 显示柱状图饼图使用CLI接入 npm install echarts --save 1.可以全局引入(在main.js) // 引入echarts import echar ...
vue 使用echarts实现3D饼图和环形图
记录一下echarts实现3d饼图和环形图功能## 标题实现效果首先第一步安装echarts和echarts-gl npm install echarts echarts-gl安装最新版本可能会有 ...
Echarts之圆饼图用法
Echarts之圆饼图用法 css代码 html代码 js代码 css代码 #chartone {float: left;margin-left: -50px;height: 159px;width: ...
Obiee+echarts实例之饼图（2）
一.效果图 1.这是用Obiee + echarts做出来的饼图,效果如图: 2.数据(仅供参考),如图: 二.代码解析 //前缀  <s ...
vue中用echarts实现复合饼图，带关系连接线
1.拿到产品原型图,需求中有这样一个图表 2.翻看echart的饼图示例,没有这种复合饼图,只有一个嵌套饼图 3. 于是网上查网友的文章,查到两篇类似的贴子,(52条消息) echarts模仿exce ...
【Echarts】- 制作饼图
效果大概是这样步骤分析封装好函数,为后续传入真实数据做准备初始化echarts 设置配置项,空的 option 即可创建图表查找官方示例按需求,自定义配置图表第一步:e ...
echarts的圆饼图自定义颜色
圆饼图自定义颜色 1.在HTML中的代码: <div id="echartZB" style="width:400px;height:600px;margin-le ...
ECharts常用图表饼图
1.图表4 饼图 1.1.饼图的实现步骤步骤1 ECharts 最基本的代码结构此时 option 是一个空空如也的对象步骤2 准备数据步骤3 准备配置项在 series 下设置 type: ...
echarts多个饼图环图中间固定文字,鼠标移入后出现相应的提示
项目中遇到这种需求,有两种解决方法, 一.在echarts的配置手册中搜graphic属性,并配置,可以在圈内显示固定的文字 graphic: [{ //环形图中间添加文字type: 'text', ...

echarts使用之饼图

echarts使用之饼图相关推荐

最新文章

热门文章