echarts--(2)--创建一个饼图

一，安装echarts之后创建echarts组件

二，用 option 描述图表

echarts 的使用者，使用 option 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，option 表述了：数据、数据如何映射成图形、交互行为。

三，实际例子

<template><div class="revenueBox"><div class="container"><el-radio-group v-model="rangeRadio" size="small"><el-radio-button label="1">当日</el-radio-button><el-radio-button label="2">近7天</el-radio-button><el-radio-button label="3">近30天</el-radio-button></el-radio-group><!-- 时间范围选择 --><el-date-picker type="datetime" placeholder="开始时间" v-model="startTime" class="w170 ml20"></el-date-picker><span class="tace ml10 cogr">--</span><el-date-picker type="datetime" placeholder="结束时间" v-model="endTime" class="w170 ml10"></el-date-picker><el-button size="small" class="ml20" type="primary" @click="certain">确定</el-button></div><!-- 总体营业指标 --><div class="container mt20 echartsBox"><div class="title"><div class="chart-title">总体营业指标</div></div><div class="chart-area ml40"><echarts :chartData="option1" :width="'40%'" :class="'leftEchart'"></echarts><span class="middle-span"></span><echarts :chartData="option2" :width="'40%'" :class="'rightEchart'"></echarts></div></div><div class="tableBox"><!-- 店内收款占比 --><div class="container mt20 echartsBox"><div class="title"><div class="chart-title">店内收款占比</div></div><div class="chart-area ml40"><echarts :chartData="option2" :width="'100%'" ></echarts></div></div><div class="middle-span2"></div><!-- 外卖收款占比 --><div class="container mt20 echartsBox secondechart"><div class="title"><div class="chart-title">外卖收款占比</div></div><div class="chart-area ml40"><echarts :chartData="option2" :width="'100%'" ></echarts></div></div></div></div>
</template><script>
import Echarts from '@/components/echarts';
export default {components:{Echarts,},name: "revenueMain",data() {return {rangeRadio:'2',startTime:'',endTime:'',option1: {// title: {//     text: '某站点用户访问来源',//     subtext: '纯属虚构',//     left: 'center'// },tooltip: {trigger: 'item'},legend: {orient: 'vertical',top:'30%',      //距离顶部位置right: 0,  //右侧显示show:true,   //控制是否显示// itemWidth:15,// itemHeight:15,  //控制icon的宽度和高度icon:'circle'   //把icon设置为圆形},series: [{name: '访问来源',type: 'pie',radius: ['40%', '70%'],avoidLabelOverlap: false,labelLine: {show: true},label: {formatter: '{b}: {d}%'},data: [{value: 1000, name: '外卖收款'},{value: 1000, name: '店内收款'}],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]},option2: {tooltip: {trigger: 'item'},legend: {orient: 'vertical',right: 0,top: 'center',},series: [{name: '访问来源',type: 'pie',radius: ['40%', '70%'],avoidLabelOverlap: false,labelLine: {show: true},data: [{value: 1048, name: '搜索引擎'},{value: 735, name: '直接访问'},{value: 580, name: '邮件营销'},{value: 484, name: '联盟广告'},{value: 300, name: '视频广告'}],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]}}},methods:{//发起请求，获取收款构成的数据async getCollections(){console.log(this.startTime)var params={dateType:this.rangeRadio,startT:this.startTime,endT:this.endTime}try{var res = await this.$http.get('api/analyze/makeCollectionsIndex',params);}catch(err){console.log("报错了：",err)}console.log(res)},certain(){this.getCollections()}},created(){this.getCollections()}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.container{background: #FFFFFF;padding: 25px 24px;
}
.revenueBox .echartsBox{padding: 0 ;.title{background: #D2E0FC;height: 60px;display: flex;align-items: center;.chart-title{border-left: 2px solid #4F7BCA;padding-left: 6px;color: #333333;font-size: 16px;font-weight: bold;}}.chart-area{width: calc(100% - 80px);height: 550px;padding: 20px 30px;box-sizing: border-box;// box-shadow: 0 2px 13px 0 rgba(75, 75, 75, 0.23);display: flex;align-items: center;justify-content: center;.middle-span{width: 2px;height: 180px;background: #E9E8E8;margin: 0 120px;}}
}
.tableBox{display: flex;width: 100%;.echartsBox{width: 100%;}.middle-span2{width: 20px;}
}
.dyic{display: block;}
.w170{width: 170px;}
.ml20{margin-left: 20px;}
.cogr{color:#E9E8E8;}
.lh42{line-height: 42px;}
</style>

实现的效果：

四，参看配置文档

其实，常用的使用场景，都已经内置了配置项，在这个网站上都可以找到对应的配置数据：
https://echarts.apache.org/zh/option.html#series-pie

echarts--(2)--创建一个饼图相关推荐

使用jfreechart来创建一个简单的饼图
使用jfreechart来创建一个简单的饼图代码如下 package com.jfreechart;import java.io.*; import org.jfree.data.general.D ...
php创建一个类,JavaScript_创建一个类Person的简单实例，创建一个类Person，包含以下属 - phpStudy...
创建一个类Person的简单实例创建一个类Person,包含以下属性:姓名(name).年龄(age).朋友(friends数组).问候(sayhi方法,输出问候语,例如:"你好!&quo ...
Android自定义控件学习（四）------创建一个视图类
创建一个视图类精心设计的自定义视图与其他精心设计的类非常相似.它使用易于使用的界面封装了一组特定的功能,它可以高效地使用CPU和内存,等等.不过,作为一个设计良好的设计,自定义视图应该: 符合And ...
android自定义View学习（一）----创建一个视图类
创建一个视图类精心设计的自定义视图与其他精心设计的类非常相似.它使用易于使用的界面封装了一组特定的功能,它可以高效地使用CPU和内存,等等.不过,作为一个设计良好的班级,自定义视图应该: 符合And ...
Echarts数据可视化series-pie饼图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
java调用jasper_Java开源报表Jasper入门(2) -- 使用JasperSoft Studio创建一个简单报表
在接下来的教程中,我们将实现一个简单的JasperReports示例,展现其基本的开发.使用流程.文章很长,不过是以图片居多,文字并不多. 实例中使用最新的Jasper Studio5.2进行报表设计 ...
用pyecharts画一个饼图
pyecharts是一款Python的图表库,可以用来绘制各种类型的图表,包括饼图.下面是一个简单的例子,展示如何使用pyecharts来画一个饼图. 首先,需要安装pyecharts: pip in ...
用Python轻松创建一个交互式可视化大屏！
大家好,我是小z,也可以叫我阿粥本文将和大家一起学习一个专门为数据科学家(机器学习工程师)设计的基于 Python 的三方库 ---- Streamlit,它只需几行代码即可创建外观精美的应用程序, ...
从零开始创建一个vue项目 1
从零开始创建一个vue项目创建空文件夹,存放相关目录,cmd进入命令行 vue init webpack token 创建项目(除eslint,其它都yes) 打包配置config下面的index. ...
linux创建一个交换分区,如何创建linux交换分区
匿名用户 1级 2017-03-26 回答 1.mkswap 把一个分区格式化成为swap交换区: [root@localhost]# mkswap /dev/sda6 注:创建此分区为swap 交换 ...