vue+elementUI中使用Echarts之餅圖問題

更新時(shí)間：2023年10月24日 09:28:40 作者：橘哥哥

這篇文章主要介紹了vue+elementUI中使用Echarts之餅圖問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue elementUI使用Echarts之餅圖

實(shí)現(xiàn)效果如圖

老規(guī)矩先創(chuàng)建占位子的div

<div id="pieReport" style="width: 400px;height: 300px;"></div>

然后引入Echarts,并且模擬數(shù)據(jù)

export default {
  name: "",
  data() {
    return {
      charts: "",
      opinion: ["及格人數(shù)", "未及格人數(shù)"],
      opinionData: [
        { value: 12, name: "及格人數(shù)", itemStyle: "#1ab394" },
        { value: 18, name: "未及格人數(shù)", itemStyle: "#79d2c0" }
      ]
    };
  },
}

在methods中定義方法

drawPie(id) {
      this.charts = this.$echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a}<br/>:{c} (vvxyksv9kd%)"
        },
        legend: {
          bottom: 10,
          left: "center",
          data: this.opinion
        },
        series: [
          {
            name: "狀態(tài)",
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              },
              color: function(params) {
                //自定義顏色
                var colorList = ["#1ab394", "#79d2c0"];
                return colorList[params.dataIndex];
              }
            },
            data: this.opinionData
          }
        ]
      });
    },

在mounted中調(diào)用

mounted() {
    this.$nextTick(function() {
      this.drawPie("pieReport");
    });
  }

懶得寫了注釋了,將就看吧

echarts餅圖、柱狀圖、折線圖切換

最近自學(xué)了一下如何運(yùn)用echarts制作各種圖表，首先我是用springboot+mybatis寫的后端。

TypeMapper接口中定義方法如下：

 /**
     * 查詢新聞種類以及數(shù)量
     * @return
     */
    List<Map<Object,Object>> list();

配置NewsMapper.xml文件如下：

 <select id="list" resultType="java.util.Map">
      select count(*) as num,b.type_name as typeName  from t_news a,t_type b where a.type_id=b.type_id group by a.type_id
 </select>

我這邊寫了一個(gè)連接求和查詢語句，返回值類型為Map類型，接下來常規(guī)寫TypeService和TypeServiceImpl,這里沒什么好說的，跟TypeMapper基本一樣哈，接下來寫控制類NewsController，簡要代碼如下：

@RestController
public class TypeController {
    @Autowired
    private ITypeService typeService;
    @RequestMapping("/count")
    public List<Map<Object,Object>> list(){
        List<Map<Object, Object>> list = typeService.list();
        return list;
    }
}

這里我是通過跨域獲取數(shù)據(jù)，創(chuàng)建一個(gè)TypeChart組件，在index.js配置好路由后，開始以下代碼?。?/p>

<template>
    <div class="chart-container">
		<div id="chartPie" style="width:100%; height:550px;"></div>
	</div>
</template>
 
<script>
    export default {
        name: "Typechart",
		data() {
        	return {
        		chartPie: '',
				typeName: [],//新聞?lì)愋兔Q
				typeNum: [] //新聞?lì)愋蛿?shù)量
			}
		},
		methods: {
        	drawPieChart() {
        	    // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
				this.chartPie = this.$echarts.init(document.getElementById("chartPie"));
				this.chartPie.setOption({
					//設(shè)置標(biāo)題,副標(biāo)題,以及標(biāo)題位置居中
					title: {
						text: '影片統(tǒng)計(jì)(餅狀圖)',
						//subtext: '純屬虛構(gòu)',
						x: 'center'
					},
					//具體點(diǎn)擊某一項(xiàng)觸發(fā)的樣式內(nèi)容
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/> : {c} (vvxyksv9kd%)"
					},
					//左上側(cè)分類條形符
					legend: {
						orient: 'vertical',
						left: 'left',
						//通過跨域獲取數(shù)據(jù)給data賦值
						data: []
					},
					//餅狀圖類型以及數(shù)據(jù)源
					series: [
						{
							name: '統(tǒng)計(jì)數(shù)量',
							type: 'pie',
							//radius: '70%',
							//center: ['50%', '60%'],
							//通過跨域獲取數(shù)據(jù)給data賦值
							data: [],
							//設(shè)置餅狀圖扇形區(qū)域的樣式
							itemStyle: {
								emphasis: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							},
						}
					]
				});
			},
			//動(dòng)態(tài)獲取餅狀圖的數(shù)據(jù)
			async initData() {
			//url可以在action.js配置，我是學(xué)習(xí)期間習(xí)慣這樣哈哈??！
				var url="http://localhost:9090/news/count";
				this.axios.post(url,{}).then(res=>{
					console.log(res.data);
					var getData = [];
					//先進(jìn)行賦值
					console.log(res.data.length)
					//for循環(huán)賦值
					for(let i=0; i<res.data.length; i++) {
						var obj = new Object();
						obj.name = res.data[i].typeName;
						obj.value = res.data[i].num;
						getData[i] = obj;
					}
					//然后再給餅狀圖賦值
					this.chartPie.setOption({
						legend: {
							data: res.data.typeName,
						},
						series:[{
								data: getData,
							}]
					});
				})
        		
				
			},
			drawCharts() {
				this.drawPieChart();
			},
		},
		//頁面一加載就調(diào)用方法
		mounted () {
		    //先調(diào)用這個(gè)方法賦值
        	this.initData();
        	//再調(diào)用餅狀圖方法
			this.drawCharts();
		}
 
    }
 
</script>
 
<style scoped>
	.chart-container {
		width: 100%;
		float: left;
	}
</style>

先說一下async的用法，它作為一個(gè)關(guān)鍵字放到函數(shù)前面，用于表示函數(shù)是一個(gè)異步函數(shù)，因?yàn)閍sync就是異步的意思，異步函數(shù)也就意味著該函數(shù)的執(zhí)行不會(huì)阻塞后面代碼的執(zhí)行。

運(yùn)行后圖如下：

在這里插入圖片描述