Echarts多层同心圆

最新推荐文章于 2024-06-14 08:22:18 发布

秋色遇见喵

最新推荐文章于 2024-06-14 08:22:18 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_45969432/article/details/111993644

效果：

代码

<template>
	<div>
		<div class="chart" ref="preChart"></div>
	</div>
</template>

<script>
import echarts from 'echarts'
export default {
   
   
	data() {
   
   
		return {
   
   }
	},
	mounted() {
   
   
		this.drawPieChart()
	},
	methods: {
   
   
		drawPieChart() {
   
   
			let chartData = [
				{
   
    name: '华北地区', value: 754 },
				{
   
    name: '东北地区', value: 611 },
				{
   
    name: '华东地区', value: 400 },
				{
   
    name: '中部地区', value: 300 },
				{
   
    name: '西部地区', value: 200 },
			]
			let total = chartData.reduce((a, b) => {
   
   
				return a + b.value
			}, 0)

			let optionData = getData(chartData)
			function getData(data) {
   
   
				var res = {
   
   
					series: [],
					yAxis: [