Echarts切换页签报表（饼图、柱图）代码

已于 2022-10-03 12:49:22 修改
阅读量1k 收藏 3
点赞数 1
分类专栏： Echarts 文章标签： echarts javascript ecmascript
于 2020-01-07 09:57:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hu1010037197/article/details/103833058
版权

O、预览图

在这里插入图片描述

实现图例切换效果的重点：
（1）图例设置单选： selectedMode: 'single'
（2）图例中 data: ['组织','课程','培训','专家']的每个元素需与option.series数组中的每一个name属性值相对应即可切换。
（3）option.series数组中的每一个name属性值设置为空串''（即不能匹配），故这样的数据（series）即公共系列，每个页签中都会显示（详见 图2、图3代码）。

一、图1代码




/*
//图标
var uploadedDataURL = "/asset/get/s/data-1559121268278-ozjd-lXoz.png";
var uploadedDataURL = "/asset/get/s/data-1559121263841-UC5w7mTJ9.png";
var uploadedDataURL = "/asset/get/s/data-1559121259198-sxyPSimU9.png";
var uploadedDataURL = "/asset/get/s/data-1559121254241-xj5JAIBzC.png";
var uploadedDataURL = "/asset/get/s/data-1559121249274-QxHDAdQGy.png";
*/
var sportsIcon = {
    'a':'/asset/get/s/data-1559121268278-ozjd-lXoz.png',
    'b':'/asset/get/s/data-1559121263841-UC5w7mTJ9.png',
    'c':'/asset/get/s/data-1559121259198-sxyPSimU9.png',
    'd':'/asset/get/s/data-1559121254241-xj5JAIBzC.png',
    'e':'/asset/get/s/data-1559121249274-QxHDAdQGy.png',
};


//var  colorList=['#6782B8', '#BEC7F2', '#CCE9BD', '#C1E0DE', '#B6EAFF', "rgba(250,250,250,0.5)"];



//满意度类型
var type=${[table1.B2,table1.B3,table1.B4,table1.B5,table1.B6]};

// （1）组织系列数据
var count1=${[table1.C2,table1.C3,table1.C4,table1.C5,table1.C6]};//数量
var percentage1=${[table1.D2,table1.D3,table1.D4,table1.D5,table1.D6]};//占比
var sum1=100;//总数
var data1=[];
for(var i=0; i<type.length; i++){
    var node = {
        value:count1[i],
        name:type[i],
        percentage:percentage1[i]
    };
	data1.push(node);
}

// （2）课程系列数据
var count2=${[table3.C2,table3.C3,table3.C4,table3.C5,table3.C6]};//数量
var percentage2=${[table3.D2,table3.D3,table3.D4,table3.D5,table3.D6]};//占比
var sum2=200;//总数
var data2=[];
for(var i=0; i<type.length; i++){
    var node = {
        value:count2[i],
        name:type[i],
        percentage:percentage2[i]
    };
	data2.push(node);
}

// （3）培训系列数据
var count3=${[table4.C2,table4.C3,table4.C4,table4.C5,table4.C6]};//数量
var percentage3=${[table4.D2,table4.D3,table4.D4,table4.D5,table4.D6]};//占比
var sum3=300;//总数
var data3=[];
for(var i=0; i<type.length; i++){
    var node = {
        value:count3[i],
        name:type[i],
        percentage:percentage3[i]
    };
	data3.push(node);
}

// （4）专家系列数据
var count4=${[table5.C2,table5.C3,table5.C4,table5.C5,table5.C6]};//数量
var percentage4=${[table5.D2,table5.D3,table5.D4,table5.D5,table5.D6]};//占比
var sum4=400;//总数
var data4=[];
for(var i=0; i<type.length; i++){
    var node = {
        value:count4[i],
        name:type[i],
        percentage:percentage4[i]
    };
	data4.push(node);
}




//转数据点名称和数据点值的内容
var data11 = option.series[0].data;
data1.forEach(function(d){
    var name = d.name;
    for (var i = 0,len=data11.length;i<len;i++) {
        var d1 = data11[i];
        var _name = d1.name;
        if (_name && _name.replace('\\n', '\n') == name) {
            d.link = d1.link;
            break;
        }
    }
});
var data22 = option.series[1].data;
data2.forEach(function(d){
    var name = d.name;
    for (var i = 0,len=data22.length;i<len;i++) {
        var d1 = data22[i];
        var _name = d1.name;
        if (_name && _name.replace('\\n', '\n') == name) {
            d.link = d1.link;
            break;
        }
    }
});
var data33 = option.series[2].data;
data3.forEach(function(d){
    var name = d.name;
    for (var i = 0,len=data33.length;i<len;i++) {
        var d1 = data33[i];
        var _name = d1.name;
        if (_name && _name.replace('\\n', '\n') == name) {
            d.link = d1.link;
            break;
        }
    }
});
var data44 = option.series[3].data;
data4.forEach(function(d){
    var name = d.name;
    for (var i = 0,len=data44.length;i<len;i++) {
        var d1 = data44[i];
        var _name = d1.name;
        if (_name && _name.replace('\\n', '\n') == name) {
            d.link = d1.link;
            break;
        }
    }
});



//颜色
var normalColors =  {
    color: function (params) {
        var colorList = [
            ['#c8e2c7', '#7baf8c'],['#accfd2', '#69a4b4'],
            ['#b6d9f6', '#4f9be5'],['#b1beee', '#647fcb'],
            ['#e5defa', '#9b9bee'],['#96acd8', '#2d4893'],
            ['#adc6e3', '#5f85d7']
        ];
        var index= params.dataIndex % colorList.length;
        return new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0,color: colorList[index][0] },{ offset: 1,color: colorList[index][1]}]);
    }
};


option.grid= {
    bottom: 150,
    left: 0,
    right: '10%'
};

option.xAxis= [{
    //type: "category",
    axisLine: {
        lineStyle: {
            show: false
        },
        show: false
    },
    axisLabel: {
        show: false,
    }
}];

option.legend= {
    icon: "roundRect", //图例形状（ circle，rect，line，roundRect，triangle，diamond，pin，arrow，none）
    //图例自定义图片形状
    //icon : 'image://../../images/hsyb/water.png' 　　// image://  后跟图片路径
    icon : 'image:///meta/QJC_V3/analyses/ZHFX/BI_GYSHX/images/icon_2.png',
    // top: "center",
    orient: "vartical",
    x: 'left', // 'center' | 'left' | {number},  x轴设置图例位置水平方向上的上下左右
    y: '15', // 'center' | 'bottom' | {number}   y轴设置图例位置垂直方向的上下左右
    //left: "3%",
    itemWidth: 14,
    itemHeight: 14,
    itemGap :10,// 设置间距
    show:true,
    selectedMode: 'single',
    data: ['组织','课程','培训','专家'],
    inactiveColor: '#8F9193',//图例默认颜色868686
    textStyle: { //图例选中样式
        color: '#526FC1',//0068DF
        padding: [5, 7, 5, 7],
        borderColor:'#F2F2F7',
        borderRadius:3,
        backgroundColor: 'rgba(208,218,233,1)',
        borderWidth: 1,
        fontSize: 14,
        fontWeight:550
    }
};


option.series= [
    {
        name:'组织',
        type: 'pie',
        radius: ['30%', '51%'],
        center: ['50%', '50%'],
        itemStyle: {
            normal: normalColors
        },
        labelLine:{  
            normal:{  
                length:25
            }  
        },
        label:{
            normal:{
                textStyle:{
                   // color:'black' //字体颜色
                    fontSize: '13',
                    fontWeight: 'normal', //bolder
                    fontFamily: 'Microsoft YaHei',
                },
                formatter: function(params){
                    return params.name+'：'+count1[params.dataIndex];
                    //return params.name+'：'+count1[params.dataIndex]+'（'+percentage1[params.dataIndex]+'）';
                }
            }
            
        },
        data: data1
    },
    {
        name:'课程',
        type: 'pie',
        radius: ['30%', '51%'],
        center: ['50%', '50%'],
        itemStyle: {
            normal: normalColors
        },
        labelLine:{  
            normal:{  
                length:25
            }  
        },
        label:{
            normal:{
                textStyle:{
                   // color:'black' //字体颜色
                    fontSize: '13',
                    fontWeight: 'normal', //bolder
                    fontFamily: 'Microsoft YaHei',
                },
                formatter: function(params){
                    return params.name+'：'+count2[params.dataIndex]+'（'+percentage2[params.dataIndex]+'）';
                }
            }
            
        },
        data: data2
    },
    {
        name:'培训',
        type: 'pie',
        radius: ['30%', '51%'],
        center: ['50%', '50%'],
        itemStyle: {
            normal: normalColors
        },
        labelLine:{  
            normal:{  
                length:25
            }  
        },
        label:{
            normal:{
                textStyle:{
                   // color:'black' //字体颜色
                    fontSize: '13',
                    fontWeight: 'normal', //bolder
                    fontFamily: 'Microsoft YaHei',
                },
                formatter: function(params){
                    return params.name+'：'+count3[params.dataIndex]+'（'+percentage3[params.dataIndex]+'）';
                }
            }
            
        },
        data: data3
    },
    {
        name:'专家',
        type: 'pie',
        radius: ['30%', '51%'],
        center: ['50%', '50%'],
        itemStyle: {
            normal: normalColors
        },
        labelLine:{  
            normal:{  
                length:25
            }  
        },
        label:{
            normal:{
                textStyle:{
                   // color:'black' //字体颜色
                    fontSize: '13',
                    fontWeight: 'normal', //bolder
                    fontFamily: 'Microsoft YaHei',
                },
                formatter: function(params){
                    return params.name+'：'+count4[params.dataIndex]+'（'+percentage4[params.dataIndex]+'）';
                }
            }
            
        },
        data: data4
    },
    
    

    // 边框的设置
    {
        radius: ['47%', '51%'],
        center: ['50%', '50%'],
        type: 'pie',
        label: {
            normal: {
                show: false
            },
            emphasis: {
                show: false
            }
        },
        labelLine: {
            normal: {
                show: false
            },
            emphasis: {
                show: false
            }
        },
        animation: false,
        tooltip: {
            show: false
        },
        itemStyle: {
            normal: {
                color:'rgba(250,250,250,0.5)'
            }
        },
        data: [{
            value: 1,
        }],
    }
];


/*
option.title={
        text:100,
        subtext: '总数',
        x: 'center',
        y: 'center',
        textStyle: {
            fontSize:18,
            fontWeight:'normal',
            color: ['#333']
        },
        subtextStyle: {
            color: '#666',
            fontSize: 13
        },
    };
*/


option.tooltip = {
    show: true,
    trigger: 'item',
    formatter: function(params) {
        return params.name+"<br>数量："+params.value
            +"<br>占比："+params.data.percentage;
        //return params.name+"<br>数量："+params.value +"<br>占比："+Math.round(params.value*1.0/sum * 10000) / 100 + '%';
    },
    textStyle     : {
        color   : '#FFFFFF'
    },
    axisPointer : {
        type    : 'shadow'
    }
};

二、图2代码



//类型
var type=${[table1.B2,table1.B3,table1.B4,table1.B5,table1.B6,
            table1.B7,table1.B8,table1.B9,table1.B10,table1.B11]};

// （1）专业领域覆盖面统计数据
var count1=${[table1.C2,table1.C3,table1.C4,table1.C5,table1.C6,
            table1.C7,table1.C8,table1.C9,table1.C10,table1.C11]};//数量
var percentage1=${[table1.D2,table1.D3,table1.D4,table1.D5,table1.D6,
            table1.D7,table1.D8,table1.D9,table1.D10,table1.D11]};//占比
var sum1=${table1.B12};//总数
var data1=[];
for(var i=0; i<type.length; i++){
    var node = {
        name:type[i],
        value:count1[i],
        percentage:percentage1[i]
    };
	data1.push(node);
}

// （2）供应商覆盖面统计数据
var count2=${[table4.C2,table4.C3,table4.C4,table4.C5,table4.C6,
            table4.C7,table4.C8,table4.C9,table4.C10,table4.C11]};//数量
var percentage2=${[table4.D2,table4.D3,table4.D4,table4.D5,table4.D6,
            table4.D7,table4.D8,table4.D9,table4.D10,table4.D11]};//占比
var sum2=${table4.B12};//总数
var data2=[];
for(var i=0; i<type.length; i++){
    var node = {
        name:type[i],
        value:count2[i],
        percentage:percentage2[i]
    };
	data2.push(node);
}




//转数据点名称和数据点值的内容
var data11 = option.series[0].data;
data1.forEach(function(d){
    var name = d.name;
    for (var i = 0,len=data11.length;i<len;i++) {
        var d1 = data11[i];
        var _name = d1.name;
        if (_name && _name.replace('\\n', '\n') == name) {
            d.link = d1.link;
            break;
        }
    }
});
//转数据点名称和数据点值的内容
var data22 = option.series[1].data;
data2.forEach(function(d){
    var name = d.name;
    for (var i = 0,len=data22.length;i<len;i++) {
        var d1 = data22[i];
        var _name = d1.name;
        if (_name && _name.replace('\\n', '\n') == name) {
            d.link = d1.link;
            break;
        }
    }
});


var sportsIcon = {
    'a':'/asset/get/s/data-1559121268278-ozjd-lXoz.png',
    'b':'/asset/get/s/data-1559121263841-UC5w7mTJ9.png',
    'c':'/asset/get/s/data-1559121259198-sxyPSimU9.png',
    'd':'/asset/get/s/data-1559121254241-xj5JAIBzC.png',
    'e':'/asset/get/s/data-1559121249274-QxHDAdQGy.png',
};


var normalColors =  {
    color: function (params) {
        var colorList = [
            ['#c8e2c7', '#7baf8c'],['#accfd2', '#69a4b4'],
            ['#b6d9f6', '#4f9be5'],['#b1beee', '#647fcb'],
            ['#e5defa', '#9b9bee'],['#96acd8', '#2d4893'],
            ['#adc6e3', '#5f85d7']
        ];
        var index= params.dataIndex % colorList.length;
        return new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0,color: colorList[index][0] },{ offset: 1,color: colorList[index][1]}]);
    }
};


option.grid= {
    bottom: 150,
    left: 0,
    right: '10%'
};

option.xAxis= [{
    //type: "category",
    axisLine: {
        lineStyle: {
            show: false
        },
        show: false
    },
    axisLabel: {
        show: false,
    }
}];

option.legend= {
    icon: "roundRect", //图例形状（ circle，rect，line，roundRect，triangle，diamond，pin，arrow，none）
    //icon : 'image://../../images/hsyb/water.png' 　　// image://  后跟图片路径  //图例自定义图片形状
    icon : 'image://../../images/hsyb/water.png',//无该图片，目的是让图例的左侧图示隐藏
    orient: "vartical",
    x: 'left', // 'center' | 'left' | {number},  x轴设置图例位置水平方向上的上下左右
    y: '15', // 'center' | 'bottom' | {number}   y轴设置图例位置垂直方向的上下左右
    itemWidth: 14,
    itemHeight: 14,
    itemGap :10,// 设置间距
    show:true,
    selectedMode: 'single',
    inactiveColor: '#8F9193',//图例默认颜色868686
    data: [
        {
        	name:'专业领域',
            textStyle: { //图例选中样式
                color: '#526FC1',//0068DF
                padding: [7, 7, 5, 7],
                borderColor:'#F2F2F7',
                borderRadius:3,
                backgroundColor: 'rgba(208,218,233,1)',
                borderWidth: 1,
                fontSize: 14,
                fontWeight:550
            }
        },{
        	name:'供应商',
            textStyle: { //图例选中样式
                color: '#526FC1',//0068DF
                padding: [7, 20, 5, 7],
                borderColor:'#F2F2F7',
                borderRadius:3,
                backgroundColor: 'rgba(208,218,233,1)',
                borderWidth: 1,
                fontSize: 14,
                fontWeight:550
            }
        }]
    
};


option.series= [
    {
        name:'专业领域',
        type: 'pie',
        radius: ['30%', '51%'],
        center: ['50%', '50%'],
        itemStyle: {
            normal: normalColors
        },
        labelLine:{  
            normal:{  
                length:25
            }  
        },
        label:{
            normal:{
                textStyle:{
                   // color:'black' //字体颜色
                    fontSize: '13',
                    fontWeight: 'normal', //bolder
                    fontFamily: 'Microsoft YaHei',
                },
                formatter: function(params){
                    return params.name+'：'+count1[params.dataIndex];
                    //return '{a|}\n{nameStyle|'+params.name+'：}'+'{rate|已覆盖：'+percentage1[params.dataIndex]+'}';
                },
            }
            
        },
        data: data1
    },
    {
        name:'供应商',
        type: 'pie',
        radius: ['30%', '51%'],
        center: ['50%', '50%'],
        itemStyle: {
            normal: normalColors
        },
        labelLine:{  
            normal:{  
                length:25
            }  
        },
        label:{
            normal:{
                textStyle:{
                   // color:'black' //字体颜色
                    fontSize: '13',
                    fontWeight: 'normal', //bolder
                    fontFamily: 'Microsoft YaHei',
                },
                formatter: function(params){
                    return params.name+'：'+count2[params.dataIndex];
                    //return '{a|}\n{nameStyle|'+params.name+'：}'+'{rate|已覆盖：'+percentage1[params.dataIndex]+'}';
                },
            }
            
        },
        data: data2
    },
    
    
    // 边框的设置
    {
        radius: ['47%', '51%'],
        center: ['50%', '50%'],
        type: 'pie',
        label: {
            normal: {
                show: false
            },
            emphasis: {
                show: false
            }
        },
        labelLine: {
            normal: {
                show: false
            },
            emphasis: {
                show: false
            }
        },
        animation: false,
        tooltip: {
            show: false
        },
        itemStyle: {
            normal: {
                color:'rgba(250,250,250,0.5)'
            }
        },
        data: [{
            value: 1,
        }],
    }
];





/*
option.title={
        text: '100',
        subtext: '总数',
        x: 'center',
        y: 'center',
        textStyle: {
            fontSize:18,
            fontWeight:'normal',
            color: ['#333']
        },
        subtextStyle: {
            color: '#666',
            fontSize: 13
        },
    };
*/



option.tooltip = {
    show: true,
    trigger: 'item',
    formatter: function(params) {
        return params.name+"<br>数量："+params.value
            +"<br>占比："+params.data.percentage;
        //return params.name+"<br>数量："+params.value +"<br>占比："+Math.round(params.value*1.0/sum * 10000) / 100 + '%';
    },
    textStyle     : {
        color   : '#FFFFFF'
    },
    axisPointer : {
        type    : 'shadow'
    }
};

三、图3代码



//类型
var type=${[table1.B2,table1.B3,table1.B4,table1.B5,table1.B6,table1.B7,table1.B8,table1.B9,table1.B10,
            table1.B11,table1.B12,table1.B13,table1.B14,table1.B15,table1.B16,table1.B17,table1.B18,table1.B19]};

// （1）分类培训统计数据
var count1=${[table1.C2,table1.C3,table1.C4,table1.C5,table1.C6,table1.C7,table1.C8,table1.C9,table1.C10,
              table1.C11,table1.C12,table1.C13,table1.C14,table1.C15,table1.C16,table1.C17,table1.C18,table1.C19]};//数量
var percentage1=${[table1.D2,table1.D3,table1.D4,table1.D5,table1.D6,table1.D7,table1.D8,table1.D9,table1.D10,
                   table1.D11,table1.D12,table1.D13,table1.D14,table1.D15,table1.D16,table1.D17,table1.D18,table1.D19]};//占比
var sum1=100;//总数
var data1=[];
for(var i=0; i<type.length; i++){
    var node = {
        name:type[i],
        value:count1[i],
        percentage:percentage1[i]
    };
	data1.push(node);
}

// （2）分类供应商统计数据
var count2=${[table2.C2,table2.C3,table2.C4,table2.C5,table2.C6,table2.C7,table2.C8,table2.C9,table2.C10,table2.C11,table2.C12,table2.C13,table2.C14,table2.C15,table2.C16,table2.C17,table2.C18,table2.C19]};//数量
var percentage2=${[table2.D2,table2.D3,table2.D4,table2.D5,table2.D6,table2.D7,table2.D8,table2.D9,table2.D10,table2.D11,table2.D12,table2.D13,table2.D14,table2.D15,table2.D16,table2.D17,table2.D18,table2.D19]};//占比
var sum2=100;//总数
var data2=[];
for(var i=0; i<type.length; i++){
    var node = {
        name:type[i],
        value:count2[i],
        percentage:percentage2[i]
    };
	data2.push(node);
}

// （3）分类课程统计数据
var count3=${[table3.C2,table3.C3,table3.C4,table3.C5,table3.C6,table3.C7,table3.C8,table3.C9,table3.C10,table3.C11,table3.C12,table3.C13,table3.C14,table3.C15,table3.C16,table3.C17,table3.C18,table3.C19]};//数量
var percentage3=${[table3.D2,table3.D3,table3.D4,table3.D5,table3.D6,table3.D7,table3.D8,table3.D9,table3.D10,table3.D11,table3.D12,table3.D13,table3.D14,table3.D15,table3.D16,table3.D17,table3.D18,table3.D19]};//占比
var sum3=100;//总数
var data3=[];
for(var i=0; i<type.length; i++){
    var node = {
        name:type[i],
        value:count3[i],
        percentage:percentage3[i]
    };
	data3.push(node);
}




//转数据点名称和数据点值的内容
var data11 = option.series[0].data;
data1.forEach(function(d){
    var name = d.name;
    for (var i = 0,len=data11.length;i<len;i++) {
        var d1 = data11[i];
        var _name = d1.name;
        if (_name && _name.replace('\\n', '\n') == name) {
            d.link = d1.link;
            break;
        }
    }
});
//转数据点名称和数据点值的内容
var data22 = option.series[1].data;
data2.forEach(function(d){
    var name = d.name;
    for (var i = 0,len=data22.length;i<len;i++) {
        var d1 = data22[i];
        var _name = d1.name;
        if (_name && _name.replace('\\n', '\n') == name) {
            d.link = d1.link;
            break;
        }
    }
});
//转数据点名称和数据点值的内容
var data33 = option.series[2].data;
data3.forEach(function(d){
    var name = d.name;
    for (var i = 0,len=data33.length;i<len;i++) {
        var d1 = data33[i];
        var _name = d1.name;
        if (_name && _name.replace('\\n', '\n') == name) {
            d.link = d1.link;
            break;
        }
    }
});



//颜色
var normalColors =  {
    color: function (params) {
        var colorList = [
            ['#c8e2c7', '#7baf8c'],['#accfd2', '#69a4b4'],
            ['#b6d9f6', '#4f9be5'],['#b1beee', '#647fcb'],
            ['#e5defa', '#9b9bee'],['#96acd8', '#2d4893'],
            ['#adc6e3', '#5f85d7']
        ];
        var index= params.dataIndex % colorList.length;
        return new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0,color: colorList[index][0] },{ offset: 1,color: colorList[index][1]}]);
    }
};


option.backgroundColor='rgba(0,0,0,0)';

option.grid= {
    "top": "15%",
    "left": "15%",
    "bottom": "10%",
    "right": "10%",
    "containLabel": true
};


option.xAxis= [{
    data:type,
    type: "category",
    //main0: ["累计", "当月"],
    axisTick: {
        alignWithLabel: true
    },
    nameTextStyle: {
        color: "black"
    },
    axisLine: {
        lineStyle: {
            color: "#82b0ec",
            show: true
        }
    },
    axisLabel: {
        textStyle: {
            color: "black"
        },
        formatter:function(value){
            var newStr = "";
            if(value != null && value.length>0){
                for(var i=0; i<value.length; i+=2) {
                    if(i%2 == 0) {
                        newStr += value.substr(i,2)+'\n';
                    }
                }
            }
            return newStr;
        }
    }
}];



option.legend= {
    icon: "roundRect", //图例形状（ circle，rect，line，roundRect，triangle，diamond，pin，arrow，none）
    icon : 'image://../../images/hsyb/water.png',
    show: true,
    orient: "vartical",
    x: 'left', // 'center' | 'left' | {number},  x轴设置图例位置水平方向上的上下左右
    y: '15', // 'center' | 'bottom' | {number}   y轴设置图例位置垂直方向的上下左右
    //left: "3%",
    itemWidth: 14,
    itemHeight: 14,
    itemGap :10,// 设置间距
    selectedMode: 'single',
    inactiveColor: '#8F9193',//图例默认颜色868686
    data: [
        {
        	name:'分类培训统计',
            textStyle: { //图例选中样式
                color: '#526FC1',//0068DF
                padding: [7, 20, 5, 7],
                borderColor:'#F2F2F7',
                borderRadius:3,
                backgroundColor: 'rgba(208,218,233,1)',
                borderWidth: 1,
                fontSize: 14,
                fontWeight:550
            }
        },
        {
        	name:'分类供应商统计',
            textStyle: { //图例选中样式
                color: '#526FC1',//0068DF
                padding: [7, 7, 5, 7],
                borderColor:'#F2F2F7',
                borderRadius:3,
                backgroundColor: 'rgba(208,218,233,1)',
                borderWidth: 1,
                fontSize: 14,
                fontWeight:550
            }
        },
        {
        	name:'分类课程统计',
            textStyle: { //图例选中样式
                color: '#526FC1',//0068DF
                padding: [7, 20, 5, 7],
                borderColor:'#F2F2F7',
                borderRadius:3,
                backgroundColor: 'rgba(208,218,233,1)',
                borderWidth: 1,
                fontSize: 14,
                fontWeight:550
            }
        }
    ]
    
};


option.series= [
    {
        name: "分类培训统计",
        type: 'bar',//pictorialBar
        itemStyle: {
            normal: normalColors
        },
        //silent: true,
        barWidth: "20",
        label: {
            normal: {
                show: true,
                position: "top",
                formatter:  function(params){
                    return params.value;//[params.dataIndex]
                }
            }
        },
        data: data1
    },
    {
        name: "分类供应商统计",
        itemStyle: {
            normal: normalColors
        },
        //silent: true,
        barWidth: "20",
        type: 'bar',//pictorialBar
        label: {
            normal: {
                show: true,
                position: "top",
                formatter: function(params){
                    return params.value;//[params.dataIndex]
                }
            }
        },
        data: data2
    },
    {
        name: "分类课程统计",
        itemStyle: {
            normal: normalColors
        },
        //silent: true,
        barWidth: "20",
        type: 'bar',//pictorialBar
        label: {
            normal: {
                show: true,
                position: "top",
                formatter: function(params){
                    return params.value;//[params.dataIndex]
                }
            }
        },
        data: data3
    }

];


option.tooltip = {
    show: true,
    trigger: 'item',
    formatter: function(params) {
        return params.name+"<br>数量："+params.value
            +"<br>占比："+params.data.percentage;
        //return params.name+"<br>数量："+params.value +"<br>占比："+Math.round(params.value*1.0/sum * 10000) / 100 + '%';
    },
    textStyle     : {
        color   : '#FFFFFF'
    },
    axisPointer : {
        type    : 'shadow'
    }
};
Echarts 图表点击切换数据视图
JqejDeveloper的博客
09-16 805
在数据可视化领域，Echarts 是一款功能强大的 JavaScript 图表库，它提供了丰富的图表类型和交互功能，使得数据的可视化呈现更加生动和直观。其中，实现图表点击切换数据视图的功能可以为用户提供更多维度的数据展示，增强用户对数据的理解和分析能力。初始化图表后，通过监听图表的点击事件，当用户点击 x 轴时，切换图表的数据为 data2；通过以上步骤，我们成功实现了点击图表的 x 轴和 y 轴来切换图表级别数据的功能。在本文中，我们将介绍如何通过点击图表的 x 轴和 y 轴来切换图表级别的数据。
echarts2饼图标签含义及使用技巧（润乾报表引入第三方图形）
weixin_41807943的博客
05-14 1104
Echarts2——饼图 1.参数： title:字符串（主标题） seriesName:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎',...] category:['英文网站','中文网站',...]（种类） datavalue:[621,999,700,387,400,234,135,1548,310,335,...] subtitle:字符串（需要添加""）...
echarts柱状图饼状图切换
weixin_46029283的博客
06-26 1618
echarts柱状图饼状图切换。
echarts 图表Tabs切换自适应显示问题
最新发布
sliencebohetang的博客
11-05 276
使用VUE进行开发时，当存在多个Tabs页面共同引用Echarts组件图表，tabs页面切换时，echarts 图表没有跟随屏幕的尺寸变化而变化；
ECharts入门
qq_45835940的博客
01-03 3336
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="...
echarts图表之间的切换
m0_74359467的博客
09-13 961
然后就是呢~在js中引入假数据或外部接口并通过相应的点击事件赋给统计图type相应属性。首先先引入echarts插件。希望能对大家有帮助哦~
Echarts 动态实现柱状图、折线图、饼状图的切换
wqwq093030的博客
03-06 1868
【代码】Echarts 动态实现柱状图、折线图、饼状图的切换。
报表技术-图形报表-Echarts(含代码、文档).zip
11-21
本资料包包含了ECharts的图形报表相关的代码示例和文档，是学习和使用ECharts进行数据可视化的宝贵资源。 一、ECharts的基本概念与特点 1. 基本概念：ECharts是一个使用HTML5 Canvas绘制图表的开源库，支持多种...
Echarts 图表使用（柱状图，饼图）
Datura_Elena的博客
08-28 1790
因需要满足UI的很多需求，现在把Echarts配置项记录一下。 一、标准柱状图 主要实现了： 1，标准柱状图多种颜色显示，不同类型显示不同颜色； 2，隐藏y轴轴线和刻度； 3，修改x轴轴线颜色和字体颜色； 4，实现柱状图的渐变显示。 var myChart = echarts.init(document.getElementById('wifi')); option...
jsp利用echarts实现报表统计的实例
10-21
ECharts是一个基于JavaScript的开源图表库，提供了丰富的可视化图表类型，如折线图、柱状图、饼图等，适用于数据的直观展示。通过ECharts，开发者可以轻松地构建交互式的报表，以帮助用户理解复杂的数据。 首先，...
echarts各种图示例及转换方法
TwoBE9876的博客
03-11 1929
// 折线图数据示例 lineOption: { tooltip: { trigger: 'axis', extraCssText: 'background-color: #fff;color: rgba(78,81,78);box-shadow: 5px 5px 13px rgba(78,81,78)' }, calculable: true, xAxis: { type: 'category', data: ['培训课件', '课程', '晒课资.
echarts饼图自动切换代码
08-28
整个项目自己写的网页，做项目的时候写的，里面包含地图及地区各个区域间的传输，折线图，饼图的自动切换，柱状图及信息的轮播
ECharts柱状图和饼图实现案例
10-26
使用ECharts+Java实现的完整案例，包括实现柱状图和饼图，代码完整，有数据库文件，数据库为Oracle
echarts图表切换功能（不改变数据，只切换图形）
min的博客
05-26 9797
方法一：echarts自带（该方法能进行折线图和柱状图的切换，因为这两种图表渲染的数据格式是一致的） // 在options中加入以下配置即可 toolbox: { show: true, feature: { magicType: {type: ['line', 'bar']}//此处最新版本echarts可设置三个值（stack-堆叠模式） } } 方法二：自己进行数据处理，并重新渲染echarts（自己实操，想法
eCharts实现多图表切换
热门推荐
weixin_44896244的博客
09-23 1万+
先把表格渲染出来 //这里的seriesDataArr是传进来切换data数据来实现表格切换的数据数组 function broken(seriesDataArr) { let option = { tooltip: { trigger: 'axis' }, xAxis: { type: 'category', boundaryGap: false, data: ['****', '*****', '金**庭', '师**项目'], splitLine: { .
echarts 饼图、柱状图、折线图 切换
qq_28586135的博客
06-20 5602
echarts 饼图、柱状图、折线图切换
[echarts] 饼图折线图柱状图相互转换
qq_14993591的博客
01-28 1109
【代码】[echarts] 饼图折线图柱状图相互转换。
Echarts 自定义工具栏事件 || 柱状图和饼状图之间的切换
小雨
11-27 5838
echarts中有柱状图和折线图之间的切换,却没有柱状图和饼图直接的切换 不过echarts有自定义工具栏方法,我们可以通过自定工具栏的方法来实现echarts没有的图形切换 toolbox 中的 feature 自定方法 (title: 鼠标放上去显示的文字;icon: 自定工具栏的图标的path路径;onclick: 点击事件) 在点击事件写自己要处理成的图形代码就行了, 下面有我的一个完整实例 如何引入echarts,在我的上一篇文章中, 完整代码: <template> &lt.
前端：echarts实现柱状图的多图表切换
weixin_44899642的博客
07-07 3642
（1）首先界面界面如图所示：此时默认的信息为总体车间的数据 数据中的信息 分别为麻阳 凤凰 吉首 怀化数据信息 （2）点击信号机 会出现与之对应的数据 其余类似 重点：1. 代码中总体车间为用户第一个所看到的 2.点击信号机，轨道，道岔 要进行数据的准确的传递 以数组的形式的将各个车站数据分开 HTML代码： 需要引入对应的插件 否则会报错 css代码块： 如有错误 请及时留言...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值