jquery实现柱形图饼图等

Posted -lin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery实现柱形图饼图等相关的知识,希望对你有一定的参考价值。

主要借助 百度开发的开源的echarts.js插件,挺好用的。(自行查看官网)

https://www.echartsjs.com/examples/zh/index.html#chart-type-bar

在官网实例上部分没有在对应的图形上面显示数据,所以记录下:

主要是添加label来实现在图形上显示对于的数据
饼图显示数据:
option1 = {
            title: {
                text: ‘学历统计‘,
                subtext: ‘‘,
                x: ‘center‘
            },
            tooltip: {
                trigger: ‘item‘,
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: ‘vertical‘,
                left: ‘left‘,
                data: []
            },
            series: [
                {
                    name: ‘‘,
                    type: ‘pie‘,
                    radius: ‘55%‘,
                    center: [‘50%‘, ‘60%‘],
                    label: {//在圆内显示具体数据数字
                        normal: {
                            formatter: ‘{b}:{d}%‘,
                            position: ‘inside‘
                        }
                    },
                    data: [],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: ‘rgba(0, 0, 0, 0.5)‘
                        }
                    }
                }
            ]
        };
        
        
柱形图:

  option = {
            title: {
                text: ‘人数统计‘
            },
            color: [‘#749f83‘],
            tooltip: {},
            legend: {
                data: [‘人数‘]
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: ‘人数‘,
                type: ‘bar‘,
                label: {
                    normal: {
                        position: ‘top‘,
                        show: true
                    }
                },
                data: []
            }]
        };

 

以上是关于jquery实现柱形图饼图等的主要内容,如果未能解决你的问题,请参考以下文章

柱形图,饼图等

java web中怎么实现柱形图、饼状图等数据图?

Echarts 使用asp.net +ashx+ajax 实现 饼图柱形图后台交互

Unity怎么用UGUI制作图表,柱状图,饼图?有现成的插件吗,推荐几款

ECHARTS柱形图和饼图数值显示

Highcharts 3D柱形图;Highcharts 堆叠3D柱形图;Highcharts 3D饼图;Highcharts 3D圆环图