Echarts饼图 & Table数据联动

效果图： 

 

 

代码： 

<template>
    <div>
        <div id="myChart" :style="{width: '1000px', height: '400px'}"></div>
 
        <el-table :data="chartData" style="width:420px; margin-left: 300px" class="jk-table" :row-style="TableRowStyle">
            <el-table-column type="index" width="30" class-name="iconfont icon-circle" />
            <el-table-column prop="name" label="位置"></el-table-column>
            <el-table-column prop="value" label="数量"></el-table-column>
        </el-table>
    </div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts'
import {onMounted} from "vue";
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
 
export default {
    setup() {
        // const color = Math.random().toString(16).substr(2, 6).toUpperCase(); //生成随机颜色
        const chartData = [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' },
        ]
 
        const chartColors = ['rgb(254,67,101)','rgb(252,157,154)','rgb(249,205,173)','rgb(200,200,169)','rgb(131,175,155)']
 
        // 合并两个数组
        chartData.forEach( (x, key) => {
            chartColors.forEach( (i, keyss) => {
                if( key == keyss) {
                    x.color = i
                }
            })
        })
 
        onMounted(() => { // 需要获取到element,所以是onMounted的Hook
            let myChart = echarts.init(document.getElementById("myChart123"));
             
            // 绘制图表
            myChart.setOption({
                // title: {
                //     text: 'Referer of a Website',
                //     subtext: 'Fake Data',
                //     // left: 'center'
                // },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                 legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['50%', '66%'],
                        label: {
                            show: false,
                            position: 'center'
                        },
                        data: chartData,
                        // emphasis: { //设置鼠标移入饼图的样式
                        //     itemStyle: {
                        //         shadowBlur: 10,
                        //         shadowOffsetX: 0,
                        //         shadowColor: 'rgba(0, 0, 0, 0.2)'
                        //     }
                        // }
                    }
                ],
                color: chartColors
            });
 
            window.onresize = function () { // 自适应大小
                myChart.resize();
            };
        });
 
        //设置table背景色
        const TableRowStyle = ({ row, rowIndex }) => {
            // 注意，这里返回的是一个对象
            let rowBackground = {};
            rowBackground.color = row.color;
            return rowBackground;
        }
 
        return {
            chartData,
            TableRowStyle
        }
    }
}
</script>