前端：echarts实现柱状图的多图表切换

最新推荐文章于 2024-06-11 15:55:14 发布
最新推荐文章于 2024-06-11 15:55:14 发布
阅读量3.3k 收藏 6
点赞数
分类专栏： 前端知识 文章标签： echarts 前端 javascript html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44899642/article/details/125662067
版权

echarts多图标切换

（1）首先界面界面如图所示：此时默认的信息为总体车间的数据 数据中的信息 分别为麻阳 凤凰 吉首 怀化数据信息
在这里插入图片描述

（2）点击信号机 会出现与之对应的数据 其余类似
在这里插入图片描述

代码展示如下：

js代码

重点：1. 代码中总体车间为用户第一个所看到的
2.点击信号机，轨道，道岔 要进行数据的准确的传递 以数组的形式的将各个车站数据分开

  var myChart = echarts.init(document.getElementById('chart_2'));
  //第一个数据代表总车间质量对比
echart_2([
    [10,56,56,67],
    [55,77,88,99],
    [66,77,88,99],
    [55,64,78,89],

]);

var totalworkshop_data={"mayang":[{"count":10},{"count":56},{"count":56},{"count":67}],
"fenghuang":[{"count":55},{"count":77},{"count":88},{"count":99}],
"jishou":[{"count":66},{"count":77},{"count":88},{"count":90}],
"huaihua":[{"count":55},{"count":64},{"count":78},{"count":89}]
};
var XHJ_data={"mayang":[{"count":12},{"count":80},{"count":30},{"count":44}],
"fenghuang":[{"count":20},{"count":30},{"count":50},{"count":48}],
"jishou":[{"count":70},{"count":18},{"count":50},{"count":60}],
"huaihua":[{"count":80},{"count":90},{"count":50},{"count":60}]
};
var GD_data={"mayang":[{"count":10},{"count":56},{"count":56},{"count":67}],
"fenghuang":[{"count":55},{"count":77},{"count":88},{"count":99}],
"jishou":[{"count":66},{"count":77},{"count":88},{"count":90}],
"huaihua":[{"count":55},{"count":64},{"count":78},{"count":89}]
};
var DC_data={"mayang":[{"count":78},{"count":96},{"count":86},{"count":67}],
"fenghuang":[{"count":95},{"count":77},{"count":68},{"count":77}],
"jishou":[{"count":86},{"count":97},{"count":78},{"count":100}],
"huaihua":[{"count":89},{"count":44},{"count":68},{"count":89}]
};//代表对应的总体车间 信号机 轨道 道岔

echart_2(totalworkshop_data);
function echart_2(seriesDataArr) {//原始为seriesDataArr
            // 基于准备好的dom，初始化echarts实例
           var myangData=[];
           var fenghuangData=[];
           var jishouData=[];
           var huaihuaData=[];
           //默认加载第一组数据即total车间质量

           if(seriesDataArr.mayang!=null){
            for(var i=0;i<seriesDataArr.mayang.length;i++){
                myangData.push(seriesDataArr.mayang[i].count);
            }
           }
           if(seriesDataArr.fenghuang!=null){
            for(var i=0;i<seriesDataArr.fenghuang.length;i++){
                fenghuangData.push(seriesDataArr.fenghuang[i].count);
            }
           } 
           if(seriesDataArr.jishou!=null){
            for(var i=0;i<seriesDataArr.jishou.length;i++){
                jishouData.push(seriesDataArr.jishou[i].count);
            }
           } 
           if(seriesDataArr.huaihua!=null){
            for(var i=0;i<seriesDataArr.huaihua.length;i++){
                huaihuaData.push(seriesDataArr.huaihua[i].count);
            }
           } 
            //m默认加载第一组数据
           
    let option={
        tooltip:{
            trigger:'axis',
            // backgroundColor:'rgb()',
        
        
           
        },
        grid: {
            top:'10%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
          show:true,
          borderColor:'#012f4a',
          broderWidth:0,
        },
        xAxis:{
            type:'category',
        
           
            splitLine:{
                show:false,
              
            },
            axisLabel:{
                show:true,
                textStyle:{
                    fontFamily:'微软雅黑',
                    color:'rgb(4,30,49)'
                },
                scale:true,
            },
              data:['1','2','3','4'],
              axisLine:{
                symbol: ['none', 'arrow'],  // 是否显示轴线箭头
                symbolSize: [8, 10], // 箭头大小
                symbolOffset: [0, 10],  
                lineStyle: {
                  color: 'rgb(94,75,205)',
                  width: 2,
                  type: 'solid'
                }
              },
              axisTick:{
                show:false
              }
            

        },
        yAxis:{
         
            type:'value',
            boundaryGap:false,
        textStyle:{
            color:'rgb(255,255,255)'
        },
        axisLine:{
           
            symbol: ['none', 'arrow'],  // 是否显示轴线箭头
      symbolSize: [8, 10], // 箭头大小
      symbolOffset: [0, 10],  
      lineStyle: {
        color: 'rgb(94,75,205)',
        width: 2,
        type: 'solid'
      }
          },
        
        axisLabel:{
            show:true,
            textStyle:{
                fontFamily:'微软雅黑',
                color:'#ffffff' ,
            }, 
        },
        splitLine:{
            show:true,
           lineStyle:{
            color:'rgb(0,43,69)'
           }
          },
          axisTick:{
            show:false,
          }
    },
        legend:{
            show:true,
            origin:'horizontal',
            bottom:10,
            textStyle:{
                color:"rgba(167,92,92,1)"
            },
            data:[{
                name:'麻阳西站',
                icon:'path://M78.625,93.094L66.494,72.081l12.132-21.013h24.264l12.132,21.013l-12.132,21.013H78.625z M95.547,80.377l4.79-8.296  l-4.79-8.296h-9.579l-4.79,8.296l4.79,8.296H95.547z',
                textStyle:{
                    fontSize:12,
                    fontWeiht:'bolder',
                    color:'#FFFDFE',
                fontFamily:'微软雅黑',
                },
                
                },
                {
                  name:'凤凰西站',
                  icon:'path://M78.625,93.094L66.494,72.081l12.132-21.013h24.264l12.132,21.013l-12.132,21.013H78.625z M95.547,80.377l4.79-8.296  l-4.79-8.296h-9.579l-4.79,8.296l4.79,8.296H95.547z',
                  textStyle:{
                    fontSize:12,
                    fontWeiht:'bolder',
                    color:'#FFFDFE',
                fontFamily:'微软雅黑',
                },
                },
                {
                    name:'吉首东站',
                    icon:'path://M78.625,93.094L66.494,72.081l12.132-21.013h24.264l12.132,21.013l-12.132,21.013H78.625z M95.547,80.377l4.79-8.296  l-4.79-8.296h-9.579l-4.79,8.296l4.79,8.296H95.547z',
                    textStyle:{
                        fontSize:12,
                        fontWeiht:'bolder',
                        color:'#FFFDFE',
                    fontFamily:'微软雅黑',
                    },
                },
                {
                    name:'怀化南站',
                    icon:'path://M78.625,93.094L66.494,72.081l12.132-21.013h24.264l12.132,21.013l-12.132,21.013H78.625z M95.547,80.377l4.79-8.296  l-4.79-8.296h-9.579l-4.79,8.296l4.79,8.296H95.547z',
                    textStyle:{
                        fontSize:12,
                        fontWeiht:'bolder',
                        color:'#FFFDFE',
                    fontFamily:'微软雅黑',
                    },
                }
            ],
            padding:[25,8,-10,0],
        },
        series:[{
            name:'麻阳西站',
            type:'bar',
            data:myangData,   //seriesDataArr[0]
            barGap:0,
            barWidth : 15,
           itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgb(250,70,188)'
                    }, {
                        offset: 1,
                        color: 'red'
                    }]),
                    barBorderRadius: [5,5,0,0],
                },
              },
 
        },
        {
            name:'凤凰西站',
            type:'bar',
            data: fenghuangData,//seriesDataArr[1],  
            barGap:0,
            barWidth : 15,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgb(142,70,250)'
                    }, {
                        offset: 1,
                        color: 'rgb(237,70,250)'
                    }]),
                    barBorderRadius: [5,5,0,0],
                },
              },
        },
        {
            name:'吉首东站',
            type:'bar',
            data:jishouData,   //seriesDataArr[2],
            barGap:0,
            barWidth : 15,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgb(    70,250,196)'
                    }, {
                        offset: 1,
                        color: 'rgb( 67,187,251)'
                    }]),
                    barBorderRadius: [5,5,0,0],
                },
              },
           
        },
        {
            name:'怀化南站',
            type:'bar',
            data: huaihuaData,//seriesDataArr[3],
            barGap:0,
            barWidth : 15,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgb( 0,191,159)'
                    }, {
                        offset: 1,
                        color: 'rgb(  250,175,70)'
                    }]),
                    barBorderRadius: [5,5,0,0],
                },
              },
           
        },
    ]
    } ;      // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
    
            window.addEventListener("resize",function(){
                myChart.resize();
            });
         }



 
$(".btnclass").click(function(){
 let goodsName=$(this).data("value");
 $( this).attr("stycle","background-color:red");
 $( this).siblings().attr("style", "");
 switch (goodsName) {
                
            case "信号机": 
            echart_2(XHJ_data);
           
                break;
            case "轨道": 
            echart_2(GD_data);
         
                break;
            case "道岔": 
              echart_2(DC_data);
                break;
                case"总体车间":
                echart_2(totalworkshop_data);
               
            default:
                console.log("点错啦");
                break;
            }
        });

HTML代码：

需要引入对应的插件 否则会报错

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/echart.js"></script>

   <div class="left_bottom public">
                        <div class="min-title">
                            <span >车间质量对比</span>
                        </div>          
                        <div class="buttonText">
                        <ul >
                              <li class="btnclass colorbtn" data-value="总体车间" ">总体车间</li>
                              <li class="btnclass" data-value="信号机">信号机</li> 
                              <li class="btnclass" data-value="轨道">轨道</li>
                              <li class="btnclass" data-value="道岔">道岔</li>
                            
                        </ul>    
                    </div> 
                        <div id="chart_2" style="width:100%;height:80%; float: left;"></div>
                        <div class="boxfoot"></div>
                    </div>

css代码块：

.min-title{
    width: 200px;
    height: 40px;
   background-color: rgb(4,30,49);
    /*margin: 0 auto;*/
    top: -20px;
    position: absolute;
    left: 50%;
    border-radius: 20px;
    text-align: center;
    margin-left: -90px;

}
.min-title span{
    display: inline-block;
    line-height: 40px;
    color: white;
    background-color: rgb(4,30,49);
}

.buttonText{
    width: 200px;
    height: 30px;
 right:-250px;
    text-align: left;
    max-width: inherit;
    position: relative;
    margin-top: 3%;
}
/*添加 */
  li{
    list-style: none;
  }
  ul{
    list-style: none;
    margin-left: -80px;
  }
  .btnclass{
   
    padding: 0 12px;
				margin: 0;
				float: left;
				color:  rgb(93,204,240);

  }
  .btnclass:hover{
    cursor: pointer;
    color: cornflowerblue;
  }

如有错误 请及时留言

妮妮学代码
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts多柱状图数据集接口对接，按钮切换数据。
poluocook的博客
06-30 2128
Echarts多条柱状图，数据集接口对接，按钮切换数据。
echarts 统计图周月切换_echarts之简单的入门——【一】做个带时间轴的柱状统计图...
weixin_39784972的博客
12-19 1175
百度Echarts五分钟上手echarts选择实例我一般直接从官方实例中选择相符自己需要的直接改动,毕竟不是前端,好吧,主要是自己懒~不是说做柱状图,一定要从柱状图中选择的,可以从任意实例中选择基本符合自己的然后修改即可修改实例时间轴dataZoom: [{startValue:'2014-06-01'}, {type:'inside'}],改为柱状图修改type类型然后运行即可看到对应效果ser...
【ECharts】echarts可切换数据-柱状图
余浩的博客
01-21 2940
option = { //timeline基本配置都写在baseoption 中 baseOption: { timeline: { axisType: 'category', show: true, autoPlay: true, playInterval: 1000, data: ['2016', '2017', '2018', '2
echarts图表切换功能（不改变数据，只切换图形）
min的博客
05-26 9044
方法一：echarts自带（该方法能进行折线图和柱状图的切换，因为这两种图表渲染的数据格式是一致的） // 在options中加入以下配置即可 toolbox: { show: true, feature: { magicType: {type: ['line', 'bar']}//此处最新版本echarts可设置三个值（stack-堆叠模式） } } 方法二：自己进行数据处理，并重新渲染echarts（自己实操，想法
vue3根据按钮切换更新echarts对应的数据
最新发布
qq_46131497的博客
06-11 404
setOption的函数定义，option是指图表的配置项和数据，是指是否之前设置的 option 进行合并。默认为 false。即表示合并。如果为 true，表示所有组件都会被删除，然后根据新option 创建所有新组件。
[echarts] 饼图折线图柱状图相互转换
qq_14993591的博客
01-28 567
【代码】[echarts] 饼图折线图柱状图相互转换。
《echarts》echart柱状图实现默认选中和定时切换选中功能
Oliver尹的博客
05-09 5539
主要实现的是在echarts中堆叠柱状图的 默认选中 以及 定时切换选中 效果；
折线图柱形图饼图三图自由切换
爱蹦哒的咸鱼的博客
04-07 1076
【代码】折线图柱形图饼图三图自由切换。
echarts全国地图与各省地图切换实例.zip
05-20
ECharts 不仅支持地图，还提供了各种图表类型，如柱状图、折线图、饼图等，且支持多图联动、自定义图例、提示框、缩放、平移等交互功能。此外，它还支持响应式布局，适应不同设备的屏幕。 总结来说，"echarts全国...
前端ECharts图表可视化大屏开发案例
06-03
ECharts是一款由百度开源的JavaScript数据可视化库，它支持丰富的图表类型，如折线图、柱状图、饼图、散点图等，同时还提供了地图、仪表盘等特色组件，适用于各种数据分析和展示场景。ECharts的特点包括高性能、易用...
vue-echarts-map-demo:echarts全国及省市地图下钻示例
05-02
ECharts是一个使用JavaScript实现的开源可视化库，提供了丰富的图表类型，如折线图、柱状图、饼图以及地图等。Vue.js则是一款轻量级的前端MVVM框架，它具有组件化、虚拟DOM、响应式数据绑定等特性，使得开发更加高效...
基于 eCharts 的百度地图学生籍贯统计.zip
01-21
eCharts 是一个由百度开发的开源 JavaScript 图表库，提供了丰富的图表类型，如柱状图、折线图、饼图等，并且支持自定义交互和动画效果。而百度地图则是一个强大的地图服务平台，提供了地图API，可以用于在网页上...
uniapp echarts图表通过rander.js 展示折线图项目模板
06-29
而Echarts则是一个基于JavaScript的数据可视化库，它提供了丰富的图表类型，如折线图、柱状图、饼图等，用于数据的直观展示。 在uni-app中集成Echarts，可以借助于Echarts提供的渲染器render.js。Echarts原本是依赖...
ECharts年月日切换图表
羊羊羊羊羊羊羊的博客
08-10 7965
效果： <div class="w30LFwid bgs mt15"> <h3 class="totalt_title"> <span class="titleIcon"> </span> 社区参与人数 </h3> <div class="w30sTab"> <ul c
Echarts切换页签报表（饼图、柱图）代码
HaleyTiger的博客
01-07 991
O、预览图 实现图例切换效果的重点： （1）图例设置单选： selectedMode: 'single' （2）图例中 data: ['组织','课程','培训','专家']的每个元素需与option.series数组中的每一个name属性值相对应即可切换。 （3）option.series数组中的每一个name属性值设置为空串''（即不能匹配），故这样的数据（series）即公共系列，每个页签...
Vue3+Echarts（柱状图）：点击不同的按钮可以切换不同年份的数据
无面人的博客
12-28 1686
Vue3+Echarts（柱状图）：点击不同的按钮可以切换不同年份的数据
echarts更换主题
itmacy的博客
12-14 1788
官网中已经了echarts除了有默认的主题外，并且内置了dark主题，还可以加载其他非内置的主题。
在echarts图表上点击数据，携带当前点击数据，进行跳转页面
yx13186308025的博客
07-14 2607
var dataName = this.EchartsLsitListOne[YIndex].code //取到每条的下标来获取code。//注意：若柱状图为纵向则获取x轴的索引，若柱状图为横向则需获取y轴的索引(见下方注释)this.$router.push({ //跳转路由传参。//注册区域的点击事件，解决数据较少时不方便点击柱状图的问题。//获取当前点击的索引值。//注册事件前先销毁点击事件（避免点击事件会重复执行）
Echarts 点击柱状图跳转其他柱状图
weixin_34355559的博客
12-27 2325
2019独角兽企业重金招聘Python工程师标准>>> ...
Echarts：JavaScript图表库的强大功能与特性概览
1. **丰富的图表类型**：ECharts内置了20多种常见的图表类型，如柱状图、饼图、线性图等，以及十几种组件，可以灵活组合以满足多样化的需求。 2. **高性能渲染引擎**：ECharts支持Canvas和SVG两种渲染技术，用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值