初步用Echarts实现圆饼图

首先让大家看一下最后的效果:

初次使用Echarts来完成图表的效果，仅此记录一下。
一、引入Echarts

import echarts from "echarts";

二、写引入图表的布局

        <div class="data_governance_div"><div class="data_quality_div" ref="main_echearts"></div></div>

.data_quality_div {width: 100%;height: 400px;
}
.data_governance_div {padding: 10px;border-left: 1px solid #e4e1e1;border-right: 1px solid #e4e1e1;border-bottom: 1px solid #e4e1e1;
}

三、初始化图表

 initEchart() {let chart = this.$refs.main_echearts;if (chart) {let myChart = echarts.init(chart);let option = {tooltip: {trigger: "item",formatter: "{a} <br/>{b} : {c} ({d}%)"},legend: {orient: "horizontal",left: "right",width: "260px",data: ["设备台账不完整","线路台关系缺失","设备台账不一致","设备安装地址缺失","停电通知未覆盖","距离异常"]},series: [{name: "访问来源",type: "pie",radius: "35%",center: ["50%", "50%"],data: [{value: 335,name: "设备台账不完整",itemStyle: { color: "#0a51b3" }},{value: 310,name: "线路台关系缺失",itemStyle: { color: "rgba(28,108,218,1)" }},{value: 234,name: "设备台账不一致",itemStyle: { color: "rgba(28,108,218,0.85)" }},{value: 135,name: "设备安装地址缺失",itemStyle: { color: "rgba(28,108,218,0.7)" }},{value: 1548,name: "停电通知未覆盖",itemStyle: { color: "rgba(28,108,218,0.5)" }},{value: 1548,name: "距离异常",itemStyle: { color: "rgba(28,108,218,0.4)" }}],itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: "rgba(0, 0, 0, 0.5)"}}}]};myChart.setOption(option);}}

四、在vue项目的mounted（）方法中调用initEchart（）方法

 mounted() {this.initEchart();}

参考资料：Ecahrts官方文档

初步用Echarts实现圆饼图相关推荐

Echarts之圆饼图用法
Echarts之圆饼图用法 css代码 html代码 js代码 css代码 #chartone {float: left;margin-left: -50px;height: 159px;width: ...
echarts的圆饼图自定义颜色
圆饼图自定义颜色 1.在HTML中的代码: <div id="echartZB" style="width:400px;height:600px;margin-le ...
canvas画条形图微信小程序_小程序-引入 echart 图表画圆饼图
前言在 web 中引入echart可视化图表是很常见的操作,那在小程序当中又如何引入使用呢示例效果完整示例效果-可以点击此处查看下载使用 ec-canvas 在github上下载echarts ...
前端vue显示柱状图_Vue接入Echarts 显示柱状图饼图
Vue接入Echarts 显示柱状图饼图使用CLI接入 npm install echarts --save 1.可以全局引入(在main.js) // 引入echarts import echar ...
在DataGridView控件中一次显示出多个圆饼图的原始程序代码
之前我们曾经提到过,您可以在Windows Form窗体上的一个DataGridView控件中一次显示出多个圆饼图(或其它形式的统计图表)以便能够一次检视多个群组数据的比例情况(如图表1所示).当时并 ...
Android自定义睡眠下表统计图,Android 进阶自定义View（5）图表统计PieChartView圆饼图的实现...
今天讲图表统计中比较常用的一个,像支付宝的月账单啥的,都是用圆饼图来做数据统计的,先看一下我最终实现的效果图: image.png 该效果实际上是两个实心圆叠加后的效果. image.png imag ...
vue 使用echarts实现3D饼图和环形图
记录一下echarts实现3d饼图和环形图功能## 标题实现效果首先第一步安装echarts和echarts-gl npm install echarts echarts-gl安装最新版本可能会有 ...
C# 控件Chart的圆饼图百分比
开发环境: 基于 VS2019 基于C#语言解决问题用C# 控件Chart 画出圆饼图百分比,很直观结果展示 4.源代码下载地址: https://download.csdn.net/down ...
Obiee+echarts实例之饼图（2）
一.效果图 1.这是用Obiee + echarts做出来的饼图,效果如图: 2.数据(仅供参考),如图: 二.代码解析 //前缀  <s ...
pyecharts常见柱状图、圆饼图、散点图
今天带大家认识一下pyecharts中常用的三种视图的画法.更多的是认识一下基本的配置项,避免走太多的坑.当然都是些常用的配置项,如果有奇怪的需求,大家自行查找.. 当然前提是必须先安装了pyecha ...

初步用Echarts实现圆饼图

初步用Echarts实现圆饼图相关推荐

最新文章

热门文章