vue+echarts饼图

效果：

<template><!-- 2.为echart准备一个具备大小的容器 --><div id="stat-model"style="width:200px;height:200px"></div>
</template>
<script>
// 1.导入echart
import * as echarts from 'echarts'
// 3.基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('stat-model'))
// 4.准备数据和配置项
var option = {// 提示框组件tooltip: {trigger: 'item',   // trigger 触发方式，放到图形上触发提示// 格式化提示内容：a 代表series系列图表名称；b 代表series数据名称 data 里面的name；c 代表series数据值 data 里面的value；d代表 当前数据/总数据的比例formatter: "{b} : {c} ({d}%)",backgroundColor:'rgba(50,50,50,0.7)',borderColor:'rgba(51,51,51)',confine: true, // 防止提示框被遮挡// 改变标示文字的颜色textStyle: {color: '#fff'  }},// 注意颜色写的位置color: ["#006cff","#60cda0","#ed8884","#ff9f7f","#0096ff","#9fe6b8","#32c5e9","#1d9dff"],// 图表中间graphic: {type: "group",top: "middle",left: "center",height: 80,children: [{type: "text",left: "center",top: "20%",style: {text: "491",textAlign: "center",textVerticaAlign: "middle",fill: "#fff",  //字体颜色font: "20px Helvetica",}},]},// 控制图表series: [{type: 'pie',  // 图表类型radius: ['40%', '80%'],  //第一项是内半径，第二项是外半径（通过它可以实现饼形图大小）// 图表中心位置 left 50%  top 50%  距离图表DOM容器  在容器中间显示center: ["50%", "50%"],// 修饰饼形图文字相关的样式 label对象label: {show: true,position: 'inner',textStyle : {fontWeight : 300 ,fontSize : 16    //文字的字体大小},formatter: "{b}",},// 修饰引导线样式labelLine: {show: false},data: [{value: 111, name: 'T3000'},{value: 105, name: 'SU10'},{value: 112, name: 'T2000'},{value: 122, name: 'M1000'},{value: 22, name: 'SH10'},{value: 13, name: 'ST10'},{value: 4, name: 'D10'},{value: 1, name: 'SA10'},{value: 1, name: 'SU20'},]}]
};
</script>

vue+echarts饼图相关推荐

vue echarts饼图封装
// main.js引入echarts import * as echarts from 'echarts' 2.pie.js // 我是饼图 const echarts = require('ech ...
vue echarts饼图文字和图形同颜色
实现效果: <template><div class="Distribution"><div id="DistributionChart&q ...
Vue+Echarts实现饼图统计通过率
Vue+Echarts实现一个饼状图 1:在项目里面安装echarts 2:在需要用图表的地方引入 1:在项目里面安装echarts // 在项目中安装echarts 插件 cnpm install ...
Vue+Echarts构建可视化大数据平台实战项目（上）粒子动效，登录界面抖动，背景图轮播★
Vue+Echarts构建可视化大数据平台实战项目(上) 前言分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就 ...
Vue+Echarts监控大屏实例十五：智慧物流监控模板实例下
接上一篇:Vue+Echarts监控大屏实例十四:智慧物流监控模板实例上源码下载地址: Vue+Echarts监控大屏实例十二:智慧物流监控模板实例下载 4.8 员工监控界面展示数量分布. ...
Vue+ECharts实现可视化地图
Apache ECharts 一个基于 JavaScript 的开源可视化图表库,提供了常规的折线图.柱状图.散点图.饼图.K线图,用于统计的盒形图,用于地理数据可视化的地图.热力图.线图,用于关系数 ...
Vue echarts封装
做大屏的时候经常会遇到 echarts 展示,下面展示在 Vue2.7 / Vue3 中对 echarts (^5.4.0) 的简单封装. 文章首发于https://blog.fxss.work/vu ...
Echarts 饼图基本用法
目录 Echarts 饼图基本用法引入Echarts 创建饼图拓展引入Echarts 所介绍的两种方法,适用于使用Echarts的每种图. 在一般的html里引入Echarts,需要下载echa ...
Vue+ECharts的小示例
Vue+ECharts做数据可视化 1. Vue Vue 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手, ...

vue+echarts饼图

vue+echarts饼图相关推荐

最新文章

热门文章