1. 程式人生 > >vue-echarts-v3 使用 label顯示格式

vue-echarts-v3 使用 label顯示格式

顯示 orien ima png ons import template chart scrip

<template> <div class="echarts"> <IEcharts :option="pie" @ready="onReady" @click="onClick"></IEcharts> </div> </template> <script> import IEcharts from ‘vue-echarts-v3/src/lite.js‘; import ‘echarts/lib/component/title‘; //引入標題組件 import ‘echarts/lib/component/legend‘; //引入圖例組件 import ‘echarts/lib/chart/pie‘; export default { components: {IEcharts}, data: () => ({ pie: { title: { text: ‘ECharts Demo‘ }, tooltip: {}, legend:{ type: ‘plain‘, orient: ‘vertical‘, right: 10, top: 20, }, series: [{ type: ‘pie‘, radius : ‘65%‘, center : [ ‘50%‘, ‘50%‘ ], label : {
normal : { formatter: ‘{b}:{c}: ({d}%)‘, textStyle : { fontWeight : ‘normal‘, fontSize : 15 } } }, data: [ {name: ‘A‘, value: 1211}, {name: ‘B‘, value: 2323}, {name: ‘C‘, value: 1919} ] }] } }), methods: { onReady(instance) { console.log(instance); }, onClick(event, instance, echarts) { console.log(arguments); } } }; </script> <style scoped> .echarts{ width: 400px; height: 400px; margin: auto; text-align: center; } </style>技術分享圖片

vue-echarts-v3 使用 label顯示格式