1:在项目里面安装echarts

// 在项目中安装echarts 插件
cnpm install echarts --save

2:在需要用图表的地方引入

// 在文件中引入
import echarts from 'echarts'

// 如：创建VUE文件，index.vue,为echarts准备一个具备大小的容器dom
<template>//<div id="container" style="width: 800px;height: 500px;"></div>
</template>
<script>import echarts from 'echarts'export default {name: '',data () {return {charts: '',opinion:['未通过','已通过'],opinionData:[{value:335, name:'未通过'},{value:310, name:'已通过'},]}},methods:{drawPie(){this.charts = echarts.init(document.getElementById('container'))this.charts.setOption({tooltip: {trigger: 'item',},legend: {orient: 'vertical',x: 'left',data:this.opinion},series: [{name:'通过率',type:'pie',radius:['35%','65%'],avoidLabelOverlap: false,label: {normal: {show: false,position: 'center'},emphasis: {show: true,textStyle: {fontSize: '26',fontWeight: 'blod'}}},labelLine: {normal: {show: false}},data:this.opinionData}]})}},//调用mounted(){this.$nextTick(function() {this.drawPie()})}}
</script>
<style scoped>* {margin: 0;padding: 0;list-style: none;}
</style>

Vue+Echarts实现饼图统计通过率相关推荐

VUE+ECharts 制作饼图
项目的首页需要实现一个饼图(后端接口返回数据) 准备工作:首先在项目里面安装echarts cnpm install echarts --s 然后我是在main.js里引入了 import echar ...
vue echarts 镂空饼图配置
我是在一个组件中使用 echarts ,通过传参控制的一些配置和数据首先是镂空,直接看代码 series: [{name: '',type: 'pie',/* 半径 */radius: ['45%' ...
用Vue和ECharts绘制问卷统计结果
用Vue和ECharts绘制问卷统计结果问卷设置了单选题.多选题以及文本题三中类型,分别使用了饼图.条形图.文本框来显示结果. 首先在html文件中,给div绑定一个"question-i ...
vue引入Echarts画饼图详解
目录 1 引入Echarts 1.1 安装 1.2 引入 1.3 基本使用 2 基本饼状图 3 为饼图添加标题等属性 3.1 标题图例 3.2 数据展示 3.3 样式设置 4 饼图扩展 5 总结 1 ...
Asp.net+Vue2构建简单记账WebApp之六（vue.js构建记账统计页面）
Asp.net+Vue2构建简单记账WebApp之一(设计) Asp.net+Vue2构建简单记账WebApp之二(使用ABP迅速搭建.Net后台) Asp.net+Vue2构建简单记账WebApp之 ...
Vue+ECharts实现可视化地图
Apache ECharts 一个基于 JavaScript 的开源可视化图表库,提供了常规的折线图.柱状图.散点图.饼图.K线图,用于统计的盒形图,用于地理数据可视化的地图.热力图.线图,用于关系数 ...
Vue+ECharts的小示例
Vue+ECharts做数据可视化 1. Vue Vue 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手, ...
Echarts pie 饼图类型后显示数据
Echarts pie 饼图类型后显示数据 sysPie:function(libtypelist){var that=this;libtypelist=that.indexData.libtypel ...
三维交互可视化平台（智慧海上牧场平台）学习开发Flask+Vue+Echarts+Mysql+websocket 实战（四）
前言三维交互可视化平台(智慧海上牧场平台)学习开发之Vue(一) 三维交互可视化平台(智慧海上牧场平台)学习开发之Flask+Vue+Mysql(二) 三维交互可视化平台(智慧海上牧场平台)学习开发 ...

Vue+Echarts实现饼图统计通过率

Vue+Echarts实现一个饼状图

1:在项目里面安装echarts

2:在需要用图表的地方引入

Vue+Echarts实现饼图统计通过率相关推荐

最新文章

热门文章