echart 在toolbox里添加自定义排序工具

最新推荐文章于 2025-06-16 17:05:11 发布

NotBad_1

最新推荐文章于 2025-06-16 17:05:11 发布

阅读量3.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： echart

本文链接：https://blog.youkuaiyun.com/NotBad_/article/details/53944833

echart 专栏收录该内容

2 篇文章

订阅专栏

本文展示了一个关于GMP认证检查中发现的缺陷分布情况的图表。通过柱状图的形式，详细列举了不同类别下的缺陷数量，并提供了按升序、降序排列及恢复原始状态的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--chart-->
    <script src="chart/echarts.js" type="text/javascript"></script>
</head>
<body>
    <div style="height: 80px"></div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="chart" style="width:800px;height: 400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart'));
        //        数值
        var data_val = [], name_val = [];
        var data=[
            {name:'总则',val:'77'},
            {name:'质量管理',val:'134'},
            {name:'机构与人员',val:'718'},
            {name:'厂房与设施',val:'881'},
            {name:'设备',val:'1654'},
            {name:'物料与产品',val:'640'},
            {name:'物料',val:'126'},
            {name:'卫生',val:'93'},
            {name:'验证',val:'67'},
            {name:'文件',val:'94'},
            {name:'确认与验证',val:'689'},
            {name:'文件管理',val:'1319'},
            {name:'生产管理',val:'640'},
            {name:'质量控制与质量保证',val:'1545'},
            {name:'委托生产与委托检验',val:'9'},
            {name:'产品发运与召回',val:'84'},
            {name:'计算机系统',val:'9'},
            {name:'产品销售与收回',val:'7'},
            {name:'投诉与不良反应报告',val:'3'},
            {name:'自检',val:'86'},
            {name:'null',val:'3'}
        ];
        $.each(data,function(i,n){
            data_val.push(n.val);
            name_val.push(n.name);
        });
        // 指定图表的配置项和数据
        var option = {
            title: {//标题
                text: 'GMP认证检查缺陷分布',//主标题文字
            },
            tooltip: {//提示框组件。
                trigger: 'item'//触发类型。
            },
            toolbox: {
                right:100,
                feature: {
                    magicType:{
                        type: ['line', 'bar']
                    },
                    myTool1: {
                        show: true,
                        title: '升序',
                        icon: 'image://icon-on.png',
                        onclick: function (){

			//创建新的变量
                            var data_val1=[], name_val1=[];

			//将数组对象排序
                            data = data.sort(function(a,b){
                                return a.val-b.val;
                            });

                            $.each(data,function(i,n){
                                data_val1.push(n.val);
                                name_val1.push(n.name);
                            });
                            option.xAxis.data = name_val1;
                            option.series[0].data = data_val1;

			//重新配置数据
                            myChart.setOption(option);
                        }
                    },
                    myTool2: {
                        show: true,
                        title: '降序',
                        icon: 'image://icon-xia.png',
                        onclick: function (){
                            var data_val1=[], name_val1=[];
                            data = data.sort(function(a,b){
                                return b.val-a.val;
                            });
                            $.each(data,function(i,n){
                                data_val1.push(n.val);
                                name_val1.push(n.name);
                            });
                            option.xAxis.data = name_val1;
                            option.series[0].data = data_val1;
                            myChart.setOption(option);
                        }
                    },
                    myTool3: {
                        show: true,
                        title: '还原',
                        icon: 'M3.8,33.4 M47,18.9h9.8V8.7 M56.3,20.1 C52.1,9,40.5,0.6,26.8,2.1C12.6,3.7,1.6,16.2,2.1,30.6 M13,41.1H3.1v10.2 M3.7,39.9c4.2,11.1,15.8,19.5,29.5,18 c14.2-1.6,25.2-14.1,24.7-28.5',
                        onclick: function (){
                            option.xAxis.data = name_val;
                            option.series[0].data = data_val;
                            myChart.setOption(option);
                        }
                    }
                }
            },
            xAxis: {
                type: 'category',//坐标轴类型。类目轴
                data: name_val, //类目数据
                boundaryGap : true,
                axisTick : {//坐标轴刻度相关设置
                    alignWithLabel : true,
                    interval : 0
                },
                axisLabel : {//坐标轴刻度标签的相关设置。
                    interval : 0,
                    rotate : 25
                }

            },
            yAxis: {//直角坐标系 grid 中的 y 轴
                axisLabel: {//坐标轴刻度标签的相关设置。
                    textStyle: {//刻度标签文字样式
                        color: '#999'//字体颜色
                    }
                }
            },
            series: [//系列列表
                {
                    name: 'GMP认证检查缺陷分布',
                    type: 'bar',//柱状/条形图
                    itemStyle: {//柱条样式
                        normal: {//正常默认
                            label: {//图形上的文本标签
                                show: true,
                                position: 'top',
                                formatter: '{c}',
                                textStyle: {
                                    color:'#000'
                                }
                            },
                            color: new echarts.graphic.LinearGradient(//柱条颜色渐变
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#83bff6'},
                                    {offset: 0.5, color: '#188df0'},
                                    {offset: 1, color: '#188df0'}
                                ]
                            )
                        },
                        emphasis: {//触发时
                            color: new echarts.graphic.LinearGradient(//柱条颜色渐变
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#2378f7'},
                                    {offset: 0.7, color: '#2378f7'},
                                    {offset: 1, color: '#83bff6'}
                                ]
                            )
                        }
                    },
                    data: data_val//系列中的数据内容数组
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>