双饼图 pie

最新推荐文章于 2024-07-01 14:24:50 发布

yuanliy

最新推荐文章于 2024-07-01 14:24:50 发布

阅读量191

点赞数

文章标签： echarts jquery

本文链接：https://blog.csdn.net/a432qbc/article/details/123004716

版权

本文介绍如何利用JavaScript库Echarts创建一个交互式的双饼图。内容包括HTML布局设置和JavaScript代码实现，同时结合jQuery进行操作，为图表提供动态效果。

摘要由CSDN通过智能技术生成

在这里插入图片描述

html

        			<div class="panel-body finance">
                        <div id="financeLeft"></div>
                        <div id="financeRight"></div>
                    </div>

    // 财务概况
    function financeLeft(id) {
   
        var myCharts = echarts.init(document.getElementById(id));
        var giftImageUrl = "/assets/pc/white/images/leadingDriver/financeOverviewLeft.png"
        var option = {
   
            tooltip: {
   
                trigger: 'item',
                formatter: "{b} : {d}% <br/> {c}"
            },
            grid: {
   
                top: 0
            },
            graphic: {
   
                elements: [{
   
                    type: 'image',
                    style: {
   
                        image: giftImageUrl,
                        width: 25,
                        height: 25
                    },
                    left: 'center',
                    top: 'center'
                }]
            },
            legend: {
   
                orient: 'vertical',
                // icon: 'circle',
                left: 12,
                bottom: 0,
                itemWidth: 16,
                itemHeight: 10,
                x: 'center',
                textStyle: {
   
                    color: '#fff',
                    fontSize: textStyle
                },
                data: []
            },
            series: [{
   
                type: 'pie',
                radius: ['40%',