ECharts绘制饼图

ECharts绘制各种图表非常方便，首先去官网找到想要绘制的图表做参考，以下链接时官网示例

Examples - Apache EChartsECharts, a powerful, interactive charting and visualization library for browserhttps://echarts.apache.org/examples/zh/index.html#chart-type-pie需要定制的部分可查阅配置手册Documentation - Apache EChartshttps://echarts.apache.org/zh/option.html#title

下面是我实现的饼图完整代码：

<template><div class="left-chart-1">
<!--    <div class="rc1-header">******分析</div>--><div class="rc1-chart-container"><div class="map" ref="chart" style="width:2.604167rem /* 500/192 */;height: 100%;"></div></div></div>
</template><script>
export default {name: 'LeftChart1',data () {return {config: {data: [],},}},methods: {initChart () {const el = this.$refs.chartconst echarts = require('echarts')const myChart = echarts.init(el)const option = {tooltip: {trigger: 'item',formatter:"{b}：{c}元"},legend: {orient:'vertical',bottom: '40%',left: 'right',textStyle:{color:'#fff'}},color:['#7cffb2','#ff6e76'],axisPointer: {label:{show:true}},series: [{name: '',type: 'pie',radius: ['40%', '70%'],avoidLabelOverlap: false,label: {normal: {show: true,position: 'outter', //标签的位置textStyle: {fontWeight: 'bold',fontSize: 16    //文字的字体大小},formatter: '{d}%'}},emphasis: {label: {show: true,fontSize: '16',fontWeight: 'bold'}},labelLine: {show: false},data: [{ value: 54035304.65, name: '已发放金额',unit:'元' },{ value: 9528272.66, name: '待发放金额',unit:'元' }]}]}myChart.setOption(option)window.addEventListener('resize', function () {myChart.resize()})}},mounted () {this.initChart()}
}
</script><style lang="less">
.left-chart-1 {width: 100%;height: 100%;display: flex;flex-direction: row;// padding-left: .520833rem /* 100/192 */;.rc1-header {font-size: .125rem /* 24/192 */;font-weight: bold;height: .15625rem /* 30/192 */;line-height: .15625rem /* 30/192 */;}.rc1-chart-container {flex: 1;display: flex;height: 100%;}.left {width: 30%;font-size: .083333rem /* 16/192 */;display: flex;flex-direction: column;justify-content: center;align-items: center;.number {font-size: .177083rem /* 34/192 */;color: #096dd9;font-weight: bold;margin-bottom: .15625rem /* 30/192 */;}}.right {flex: 1;padding-bottom: .104167rem /* 20/192 */;padding-right: .104167rem /* 20/192 */;box-sizing: border-box;}
}
</style>

ECharts绘制饼图相关推荐

【Echarts】用echarts绘制饼图
echarts绘制各种图表(柱形、折线、柱形、饼图、南丁格尔、环形、中国地图散点图、百度地图散点图、词云图)
文末附带github本文所有源代码,以及bmap.js,china.js,echarts.js,echarts-wordcloud.js文件啦 1.柱形图先来看看效果啦重要代码如下所示,必须引入e ...
echarts中饼图的异步数据加载绘制
ECharts 中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行,但是从后台异步获取数据后,需要在前台 ...
echarts实现饼图及横向柱状图的绘制
项目中需要绘制饼图,因此简单学习了下echarts的基本使用. head中引入js文件: <script src="/static/frame/echarts/echarts.min. ...
绘制3D Echarts地图饼图堆叠柱状图
绘制3D Echarts 目前在项目中遇到过的3D echarts为: 1.3D饼图(圆环图) 2.3D区域地图 3.3D堆叠柱状图. 1.echarts + echarts-gl => 绘制3 ...
技术图文：如何利用C# + Echarts 绘制「堆叠条形图」？
背景前几天,我们介绍了如何利用C# + Echarts 绘制 Bar Simple?,原以为把 Echarts 封装到这种程度就可以完成当前任务了. 可是,把软件原型提交给对方时,发现对方更希望& ...
【带着canvas去流浪】（3）绘制饼图
目录一. 任务说明二. 重点提示三. 示例代码四. hover高亮的实现思路示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:< ...
echarts之饼图制作+标示线
1,安装echarts组件 npm install echarts -s 2,在main.js中全局引入以及挂载 import echarts from 'echarts';//引入 Vue.prot ...
用Vue和ECharts绘制问卷统计结果
用Vue和ECharts绘制问卷统计结果问卷设置了单选题.多选题以及文本题三中类型,分别使用了饼图.条形图.文本框来显示结果. 首先在html文件中,给div绑定一个"question-i ...

ECharts绘制饼图

ECharts绘制饼图相关推荐

最新文章

热门文章