vue echarts饼图环形 （随着legend动态显示数据总数）

首先，你可以使用Vue框架和echarts库来创建一个饼图环形，并且根据legend动态显示数据总数。下面是一个简单的示例代码：

template:

“`html

“`

script:

“`javascript

import echarts from ‘echarts’;

export default {

data() {

return {

chartData: [

{ name: ‘数据1’, value: 20 },

{ name: ‘数据2’, value: 30 },

{ name: ‘数据3’, value: 50 },

],

total: 0,

};

},

mounted() {

this.initChart();

},

methods: {

initChart() {

const chart = echarts.init(this.$refs.chart);

const option = {

series: [

{

type: ‘pie’,

radius: [‘50%’, ‘70%’],

label: {

show: false,

position: ‘center’,

},

emphasis: {

label: {

show: true,

fontSize: ’30’,

fontWeight: ‘bold’,

},

},

data: this.chartData,

},

],

};

chart.setOption(option);

this.updateTotal();

},

updateTotal() {

this.total = this.chartData.reduce((sum, data) => sum + data.value, 0);

},

},

};

“`

其中，`chartData`是作为图表的数据源，`total`是数据总数，`updateTotal`方法用于计算数据总数。在`mounted`钩子函数中调用`initChart`方法初始化图表，并在图表初始化完成后调用`updateTotal`方法更新数据总数。

这样就可以实现一个饼图环形，并且根据legend动态显示数据总数。