echart图表-刷新界面.初始化时默认显示hover提示内容

最新推荐文章于 2024-05-31 22:21:30 发布
最新推荐文章于 2024-05-31 22:21:30 发布
阅读量3.5k 收藏
点赞数
分类专栏： 前端-echart
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caiyongshengCSDN/article/details/79095544
版权 

(function() {
   // 路径配置
   require.config({
      paths: {
         echarts: '../../lib/echarts-2.2.7/build/dist'
      }
   });

   require(
      [
         'echarts',
         'echarts/chart/line',
            'echarts/chart/bar',
            'echarts/chart/pie'
      ],
      function(ec) {
         // 中间圆环
            var radiusChart = ec.init(document.getElementById('radiusChart'));
         //中间柱状图1
            var topBarChart=ec.init(document.getElementById('topBarChart'));
         //中间柱状图2
            var bottomBarChart=ec.init(document.getElementById('bottomBarChart'));
            // 左上饼图
            var proClassChart=ec.init(document.getElementById('proClassChart'));
         // 右上饼图
            var proLevelChart=ec.init(document.getElementById('proLevelChart'));
         //咨询单位十强柱状图
            var advisoryCompanyChart=ec.init(document.getElementById('advisoryCompanyChart'));
            // 混凝土企业十强柱状图
            var concreteCompanyChart=ec.init(document.getElementById('concreteCompanyChart'));
            // 材价趋势区域图
            var priceTrendChart=ec.init(document.getElementById('priceTrendChart'));

            //中间圆环
            var radiusOption= {
                color: ['#2bc6e5','#9cd2dc','#8eacb6','#369ce1','#76aad1','#b0d7dd','#57b8f9','#29b2d2','#8eacb6','#76aad1','#9cd2dc','#2bc6e5','#369ce1','#76aad1','#2890cd','#24a9c3','#b0d7dd','#76aad1','#2890cd'],
                tooltip: {
                    showDelay:0,
                    transitionDuration:0,
                    trigger: 'item',
                    padding: 10,
                    textStyle:{fontSize:12},
                    formatter: function(params) {
                        return '造价数据' + '<br/>' + params.name + '：' + params.value + '元' + '<br/>' + '占&nbsp;&nbsp;&nbsp;比：' + params.data.percent + '%';
                    }
                },
                // legend: {
                //     orient: 'vertical',
                //     x:15,
                //     y: 'center',
                //     itemGap: 7,
                //     padding:[0,0,40,0],
                //     textStyle: {
                //         color: '#bcbcbc',
                //         backgroundColor:'rgba(0,0,0,0)',
                //         fontSize: 12
                //     },
                //     data: ['监测', '车站主体','车站装饰', '出入口通道', '风道、风井', '车站附属设施', '其他']
                // },
                calculable: false,
                series: [{
                    type: 'pie',
                    center: ['50%', '50%'],
                    radius: ['75%', '85%'],
                    itemStyle: {
                        normal: {
                            label: {
                                show: true
                            },
                            labelLine: {  //牵引线
                                show: true,
                                length :5
                            }
                        },
                        emphasis: {
                            label: {   //中间显示文字
                                show: false,
                                position: 'center',
                                textStyle: {
                                    color: '#967adc',
                                    fontSize: '16',
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    },
                    data: [{
                        value: 335,
                        percent: 25,
                        name: '人工'
                    }, {
                        value: 310,
                        percent: 34,
                        name: '水泥及制品'
                    }, {
                        value: 234,
                        percent: 4,
                        name: '黑色及有色金属'
                    },{
                        value: 325,
                        percent: 14,
                        name: '劳保用品'
                    }, {
                        value: 135,
                        percent: 6,
                        name: '劳保用品'
                    }, {
                        value: 1548,
                        percent: 9,
                        name: '五金'
                    }, {
                        value: 543,
                        percent: 8,
                        name: '周转材料'
                    }, {
                        value: 543,
                        percent: 6,
                        name: '轨道材料'
                    }, {
                        value: 543,
                        percent: 4,
                        name: '管材'
                    }, {
                        value: 543,
                        percent: 2,
                        name: '装饰石材'
                    }, {
                        value: 543,
                        percent: 2,
                        name: '化工产品'
                    }, {
                        value: 543,
                        percent: 2,
                        name: '绝热材料'
                    }, {
                        value: 543,
                        percent: 2,
                        name: '门窗楼梯'
                    }, {
                        value: 543,
                        percent: 3,
                        name: '陶瓷地砖'
                    }, {
                        value: 543,
                        percent: 3,
                        name: '天花墙板'
                    }, {
                        value: 543,
                        percent: 3,
                        name: '玻璃'
                    }, {
                        value: 543,
                        percent: 2,
                        name: '竹木'
                    }
                    ]
                }]
            };
            //中间柱状图1
            var topBarOption = {
                tooltip: {
                    trigger: 'item',
                    padding: 10,
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: '{a}<br/>{b}：{c}'
                },
                grid: {
                    x: 60,
                    x2: 20,
                    y: 28,
                    y2: 60,
                    borderWidth: '1',
                    borderColor:'#1c3a64'
                },
                xAxis: [{
                    type: 'category',
                    // name: '价格',
                    nameTextStyle: {
                        color: '#999'
                    },
                    splitLine: false,
                    axisLabel: {
                        textStyle: {
                            color: '#32b3dc'
                        },
                        rotate: 35   //文字旋转
                    },
                    axisTick: {
                        show:true,
                        lineStyle: {
                            width: 2,
                            color: '#496185'
                        }
                    },
                    axisLine: {
                        textStyle: {
                            color: '#457591'
                        },
                        lineStyle: {
                            width: 2,
                            color: '#496185'
                        }
                    },
                    data: ['广州造价站','造价通','数据公司','咨询公司','混凝土企业','交易中心','其他造价站']
                }],
                yAxis: [{
                    type: 'value',
                    // name: '工时',
                    nameTextStyle: {
                        color: '#999'
                    },
                    splitLine: {
                        lineStyle: {
                            color: ['#1c3a64'],
                            width: 1
                        }
                    },
                    splitArea:{    //背景区域
                        show:false
                    },
                    axisLine: {
                        lineStyle: {
                            width: 2,
                            color: '#457591'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#32b3dc'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                }],
                series: [{
                    name: '来源分布',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            barBorderRadius: [8, 8, 0, 0],
                            barBorderColor: 'rgba(0,0,0,0)',
                            areaStyle: {
                                type: 'default'
                            },
                            color: function(params) {
                                var colorList = [     //柱子颜色
                                    '#55dbf4','#4dd3f3','#42c8f3','#36bcf2','#29aff1','#20a6f1','#199ef0'
                                ];
                                return colorList[params.dataIndex]
                            }
                        },
                        emphasis: {     //鼠标悬停时
                            barBorderRadius: [8, 8, 0, 0]
                        }
                    },
                    barMaxWidth: 10,
                    data: [400,500,800,1500,2000,1800,1300]
                }]
            };
         //中间柱状图2
            var bottomBarOption = {
            tooltip: {
               trigger: 'item',
               padding: 10,
               axisPointer: { // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
               },
               formatter: '{a}<br/>{b}：{c}'
            },
            grid: {
               x: 60,
               x2: 20,
               y: 28,
               y2: 60,
               borderWidth: '1',
               borderColor:'#1c3a64'
            },
            xAxis: [{
               type: 'category',
               // name: '价格',
               nameTextStyle: {
                  color: '#999'
               },
               splitLine: false,
               axisLabel: {
                  textStyle: {
                     color: '#32b3dc'
                  },
                  rotate: 35   //文字旋转
               },
               axisTick: {
                  show:true,
                  lineStyle: {
                     width: 2,
                     color: '#496185'
                  }
               },
               axisLine: {
                  textStyle: {
                     color: '#457591'
                  },
                  lineStyle: {
                     width: 2,
                     color: '#496185'
                  }
               },
               data: ['信息价','参考价','供应商报价','招标控制价','中标价','合同价','投标价']
            }],
            yAxis: [{
               type: 'value',
               // name: '工时',
               nameTextStyle: {
                  color: '#999'
               },
               splitLine: {
                  lineStyle: {
                     color: ['#1c3a64'],
                     width: 1
                  }
               },
               splitArea:{    //背景区域
                  show:false
               },
               axisLine: {
                  lineStyle: {
                     width: 2,
                     color: '#457591'
                  }
               },
               axisLabel: {
                  textStyle: {
                     color: '#32b3dc'
                  }
               },
               axisTick: {
                  show: false
               }
            }],
            series: [{
               name: '类型分布',
               type: 'bar',
               itemStyle: {
                  normal: {
                     barBorderRadius: [8, 8, 0, 0],
                     barBorderColor: 'rgba(0,0,0,0)',
                     areaStyle: {
                        type: 'default'
                     },
                     color: function(params) {
                        var colorList = [     //柱子颜色
                           '#55dbf4','#4dd3f3','#42c8f3','#36bcf2','#29aff1','#20a6f1','#199ef0'
                        ];
                        return colorList[params.dataIndex]
                     }
                  },
                  emphasis: {     //鼠标悬停时
                     barBorderRadius: [8, 8, 0, 0]
                  }
               },
               barMaxWidth: 10,
               data: [400,500,800,1500,2000,1800,1300]
            }]
         };
         //左上饼图(项目类别分布)
         var proClassOption = {
            title : {
               // text: '材价来源占比分析',
               x: 15,
               y: 15,
               textStyle:{
                  fontSize: '12',
                  fontWeight: 'normal',
                  color: '#666'
               }
            },
            tooltip : {
               trigger: 'item',
               formatter:'{b}:{c}({d}%)'
               // formatter:function(params){
               //     return params.name+'<br/>总条数 : '+params.data.totalNumber+'条 <br/>占比：'+ (params.percent - 0).toFixed(2)+'%';
               // }
            },
            calculable : false,
            color: ['#9cd2dc','#76aad1','#2890cd','#2bc6e5'],
            series : [
               {
                  name:'项目类别分布',
                  type:'pie',
                  // roseType: 'angle',
                  radius : '80%',   //饼图大小
                  center: ['50%', '50%'],
                  itemStyle: {
                     normal: {
                        labelLine: {   //牵引线
                           show: true
                           // length :15
                        }
                     },
                     emphasis: {
                        label: {   //中间显示文字
                           show: false,
                           position: 'center',
                           textStyle: {
                              color: '#967adc',
                              fontSize: '16',
                              fontWeight: 'bold'
                           }
                        }
                     }
                  },
                  data:[
                     {name: '招标控制价备案',value: 25,totalNumber:250},
                     {name: '材评备案',value: 15,totalNumber:60},
                     {name: '投标中标备案',value: 30,totalNumber:300},
                     {name: '合同备案',value: 30,totalNumber:30}
                  ]
               }
            ]
         };
         //右上饼图(项目阶段占比)
         var proLevelOption = {
            title : {
               // text: '材价来源占比分析',
               x: 15,
               y: 15,
               textStyle:{
                  fontSize: '12',
                  fontWeight: 'normal',
                  color: '#666'
               }
            },
            tooltip : {
               trigger: 'item',
               formatter:'{b}:{c}({d}%)'
               // formatter:function(params){
               //     return params.name+'<br/>总条数 : '+params.data.totalNumber+'条 <br/>占比：'+ (params.percent - 0).toFixed(2)+'%';
               // }
            },
            calculable : false,
            color: ['#9cd2dc','#8eacb6','#369ce1','#76aad1','#b0d7dd','#57b8f9','#29b2d2','#2890cd','#2bc6e5'],
            series : [
               {
                  name:'项目阶段占比',
                  type:'pie',
                  // roseType: 'angle',
                  radius : '80%',   //饼图大小
                  center: ['50%', '50%'],
                  itemStyle: {
                     normal: {
                        labelLine: {   //牵引线
                           show: true
                           // length :15
                        }
                     },
                     emphasis: {
                        label: {   //中间显示文字
                           show: false,
                           position: 'center',
                           textStyle: {
                              color: '#967adc',
                              fontSize: '16',
                              fontWeight: 'bold'
                           }
                        }
                     }
                  },
                  data:[
                     {name: '投标价',value: 25,totalNumber:250},
                     {name: '合同',value: 15,totalNumber:60},
                     {name: '结算',value: 30,totalNumber:300},
                     {name: '招标控制',value: 30,totalNumber:30},
                     {name: '结算',value: 12,totalNumber:30},
                     {name: '预算',value: 10,totalNumber:30},
                     {name: '概算',value: 20,totalNumber:30},
                     {name: '估算',value: 10,totalNumber:30},
                     {name: '中标价',value: 30,totalNumber:30}
                  ]
               }
            ]
         };
         //右中柱状图(咨询单位十强)
         var advisoryCompanyOption = {
            title : {
               // text: '世界人口总量',
               textStyle: {
                  fontSize: '14',
                  fontWeight: 'normal',
                  color: '#333'
               }
            },
            tooltip : {
               trigger: 'item'
            },
            grid: {
               x: 75,
               x2: 20,
               y: 5,
               y2: 5,
               borderWidth: '0'
               // borderColor:'#E0EBFF'
            },
            calculable : true,
            xAxis : [
               {
                  type : 'value',
                  splitLine:false,
                  axisLine: {
                     show:false,
                     lineStyle: {
                        width: 1,
                        color: '#999'
                     }
                  },
                  axisTick: {
                     show:false,
                     lineStyle: {
                        width: 2,
                        color: '#999'
                     }
                  },
                  axisLabel: {
                     show:false,
                     textStyle: {
                        color: '#999'
                     }
                  },
                  boundaryGap : [0, 0.01]
               }
            ],
            yAxis : [
               {
                  type : 'category',
                  splitLine:false,
                  axisTick:false,
                  axisLine: {
                     show:false,
                     lineStyle: {
                        width: 2,
                        color: '#999'
                     }
                  },
                  axisLabel: {
                     interval:0,  //y轴信息全部显示
                     textStyle: {
                        color: '#fff'
                     }
                  },
                  data : ['尚顶咨询','尚顶咨询','广州堂询','联云众咨','广州堂询','广州伯龙','尚顶咨询','自由人咨询','金誉咨询','珠江众申']
               }
            ],
            series : [
               {
                  name:'咨询单位',
                  type:'bar',
                  barWidth:8,
                  itemStyle: {
                     normal: {
                        barBorderRadius: [8, 8, 8, 8],
                        barBorderColor: 'rgba(0,0,0,0)',
                        areaStyle: {
                           type: 'default'
                        },
                        color: function(params) {
                            var colorList = [     //柱子颜色
                                '#189df0','#1da2f0','#23a8f1','#2aaff1','#32b7f2','#3ac0f2','#43c8f3','#4ad0f3','#50D6F4','#55dbf4'
                            ];
                            return colorList[params.dataIndex]
                        }
                        //每两个柱子的颜色为一组，循环
                        // color: function(params) {
                        //     var colorItem = ['#B5C334','#C1232B'];
                        //     var currentItem=0;
                        //     var colorList=[];
                        //     for(var i=0;i<params.series.data.length;i++){
                        //        colorList.push(colorItem[currentItem]);
                        //        if(currentItem==0){
                        //           currentItem=1;
                        //        }
                        //        else {
                        //           currentItem=0;
                        //        }
                        //     }
                        //     return colorList[params.dataIndex]
                        // }
                     },
                     emphasis: {     //鼠标悬停时
                        barBorderRadius: [8, 8, 8, 8]
                     }
                  },
                  data:[300, 500, 400, 800, 1000, 500,400, 800, 1000,1500]
               }
            ]
         };
         //右下柱状图(混凝土企业十强)
         var concreteCompanyOption = {
            title : {
               // text: '世界人口总量',
               textStyle: {
                  fontSize: '14',
                  fontWeight: 'normal',
                  color: '#333'
               }
            },
            tooltip : {
               trigger: 'item'
            },
            grid: {
               x: 75,
               x2: 20,
               y: 5,
               y2: 5,
               borderWidth: '0'
               // borderColor:'#E0EBFF'
            },
            calculable : true,
            xAxis : [
               {
                  type : 'value',
                  splitLine:false,
                  axisLine: {
                     show:false,
                     lineStyle: {
                        width: 1,
                        color: '#999'
                     }
                  },
                  axisTick: {
                     show:false,
                     lineStyle: {
                        width: 2,
                        color: '#999'
                     }
                  },
                  axisLabel: {
                     show:false,
                     textStyle: {
                        color: '#999'
                     }
                  },
                  boundaryGap : [0, 0.01]
               }
            ],
            yAxis : [
               {
                  type : 'category',
                  splitLine:false,
                  axisTick:false,
                  axisLine: {
                     show:false,
                     lineStyle: {
                        width: 2,
                        color: '#999'
                     }
                  },
                  axisLabel: {
                     interval:0,  //y轴信息全部显示
                     textStyle: {
                        color: '#fff'
                     }
                  },
                  data : ['尚顶咨询','尚顶咨询','广州堂询','联云众咨','广州堂询','广州伯龙','尚顶咨询','自由人咨询','金誉咨询','珠江众申']
               }
            ],
            series : [
               {
                  name:'混凝土企业',
                  type:'bar',
                        barWidth:8,
                  itemStyle: {
                     normal: {
                        barBorderRadius: [8, 8, 8, 8],
                        barBorderColor: 'rgba(0,0,0,0)',
                        areaStyle: {
                           type: 'default'
                        },
                        color: function(params) {
                           var colorList = [     //柱子颜色
                              '#189df0','#1da2f0','#23a8f1','#2aaff1','#32b7f2','#3ac0f2','#43c8f3','#4ad0f3','#50D6F4','#55dbf4'
                           ];
                            return colorList[params.dataIndex]
                        }
                     },
                     emphasis: {     //鼠标悬停时
                        barBorderRadius: [8, 8, 8, 8]
                     }
                  },
                  data:[300, 500, 400, 800, 1000, 500,400, 800, 1000,1500]
               }
            ]
         };
         //左边材价趋势区域图
         var priceTrendOption = {
            title: {
               show:false,
               // subtext: '用户量',
               x: 10,
               y: 10,
               textStyle: {
                  fontSize: '12',
                  fontWeight: 'normal',
                  color: '#999'
               }
            },
            tooltip: {
               trigger: 'item',  //设置初始化时显示hover数据必须设为item
               padding: 10,
               axisPointer: { // 坐标轴指示器，坐标轴触发有效
                  type: 'line' // 默认为直线，可选为：'line' | 'shadow'
               }
            },
            legend: {
               data: ['材价趋势'],
               x: 'center',
               y: '410',
               itemGap: 15,
               itemHeight: 19,
               itemWidth: 30,
               textStyle: {
                  color: '#fff',
                  fontSize: 14
               }
            },
            grid: {
               x:50,
               x2:20,
               y:30,
               y2:25,
               borderWidth:'1',
               borderColor: '#496185'
            },
            calculable: true,
            xAxis: [{
               type: 'category',
               show: true,
               splitLine: false,
               axisLine: {
                  lineStyle: {
                     width: 2,
                     color: '#457591'
                  }
               },
               axisLabel: {
                  textStyle: {
                     align: 'center',
                     color: '#fff'
                  }
               },
               axisTick: {
                  show: true,    //刻度
                  lineStyle: {
                     color: '#457591'
                  }
               },
               boundaryGap: false,
               data: function () {
                  var list = [];
                  for(var i = 1;i<=7;i++){
                     list.push('201'+i);
                  }
                  return list;
               }()
            }],
            yAxis: [{
               // name: '注册用户量',
               nameTextStyle:{
                  color: '#999'
               },
               type: 'value',
               show: true,
               splitLine: {
                  lineStyle: {
                     color: ['#1b385e'],
                     width: 1
                  }
               },
               axisLine: {
                  lineStyle: {
                     width: 2,
                     color: '#457591'
                  }
               },
               // splitArea:true,
               // areaStyle: {
               //     color: [
               //         'rgba(250,250,250,0.3)',
               //         'rgba(200,200,200,0.3)',
               //         'rgba(200,200,200,0.3)'
               //     ]
               // },
               axisLabel: {
                  textStyle: {
                     color: '#fff'
                  }
               }
            }
            ],
            series: [{
               name: '材价趋势',
               type: 'line',
               scale: true,
               symbol: 'emptyCircle',
               symbolSize: [3, 3],
               smooth: true,
               // yAxisIndex:1, /*设置双Y轴时需要设置*/
               itemStyle: {  //区域颜色填充
                  normal: {
                            lineStyle: {
                                // width: 1,
                                color: '#fff'
                            },
                     areaStyle: {
                        type: 'default'
                     },
                     color: '#31a5d4'
                  }
               },
               data: [4634, 3034, 4634, 2809, 3947,3034, 4634]
            }
               ]
         };


         // 为echarts对象加载数据
            radiusChart.setOption(radiusOption);
            topBarChart.setOption(topBarOption);
            bottomBarChart.setOption(bottomBarOption);
         proClassChart.setOption(proClassOption);
         proLevelChart.setOption(proLevelOption);
         advisoryCompanyChart.setOption(advisoryCompanyOption);
         concreteCompanyChart.setOption(concreteCompanyOption);
         priceTrendChart.setOption(priceTrendOption);

         //初始化时显示tip内容
            // radiusChart.component.tooltip.showTip({seriesIndex: 0, name:'人工'});
         topBarChart.component.tooltip.showTip({seriesIndex: 0, dataIndex:0});
         bottomBarChart.component.tooltip.showTip({seriesIndex: 0, dataIndex:0});
         proClassChart.component.tooltip.showTip({ seriesIndex: 0, name:'合同备案'});
         proLevelChart.component.tooltip.showTip({ seriesIndex: 0, name:'中标价'});
         advisoryCompanyChart.component.tooltip.showTip({ seriesIndex: 0, dataIndex:9 });
         concreteCompanyChart.component.tooltip.showTip({ seriesIndex: 0, dataIndex:9 });
         priceTrendChart.component.tooltip.showTip({ seriesIndex: 0, dataIndex:0 });

            // 自适应echarts
         setTimeout(function() {
            $(window).resize(function() {
                    // distrLevelChart.resize();
                    radiusChart.resize();
                    topBarChart.resize();
                    bottomBarChart.resize();
               proClassChart.resize();
               proLevelChart.resize();
               advisoryCompanyChart.resize();
               concreteCompanyChart.resize();
               priceTrendChart.resize();

            });
         }, 200);
      }
   );
    //加载数字滚动
    $('.scroll-number').countUp({
        time: 1000
    });
})();
附图：

低_调_哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts 饼图hover效果，饼图中间显示自定义信息
rick的博客
05-23 1万+
option = {     tooltip: { show:true, trigger: 'item', position: ['35%', '32%'], backgroundColor: 'implements', textStyle:{ color: '#000000', fontStyle: 'normal',
echarts设置hover提示框
莫逸雪的博客
06-13 6188
1.写的位置： 第一种：默认方式 tooltip: { trigger: 'axis' }, 加上这句就显示提示框,效果图如下： 第二种：自定义显示形式 tooltip: { trigger: 'axis', formatter: '{b0}<br/>{a0}: {c0}家<br/>{a1}: {c1}元' } 效果图如下： 这种方式面临的问题： 解决(有点暴力，后期想到其他方式再更新)：
echarts初始化接口——init()
最新发布
yiqinkongjian的专栏
05-31 2822
弹出“主题下载”对话框中，如图所示，单击左边的“JS版本”选项卡，将其中的代码复制到所命名的“.js”格式的文件中保存。下载好“.js”格式的文件后，对“.js”格式的文件的使用与动态切换主题的方法相同。devicePixelRatio设备像素比，默认取浏览器的值window.devicePixelRatio，可以粗略理解为物理像素与屏幕像素之间的比值，同时由如下代码可以看出，在设置第三个参数时，需要给第二个参数一个占位符，即如果没有设置主题，也要在第二个参数的位置设置“null”占位。
Echarts环形图中间配置默认显示，hover到其它选项时，会切换显示当前展示。移除展示默认。
学而不思则罔,思而不学则殆
09-23 2420
echarts，环形图，中间默认显示
Echarts 柱状图默认选中第一个并显示tooltip
weixin_49511142的博客
12-04 1022
在默认情况下，要想查看柱状图的具体详情，我们可以用鼠标点击或者鼠标移入进行查看对应的信息。但是最近碰到了个这么个需求，用户希望能在页面进来的时候展示柱状图的第一个鼠标移入效果，听到这个的时候还是一头雾水。后查阅echart文档可知，除了在echarts图里触发之外，还有一种方式可以触发，即我们可以手动触发。我用的是action.tooltip.showTip。通过这个即可实现我需要的效果。想展示哪一列就将dataIndex换成对应的索引即可。
Echarts图表鼠标hover到图形交点（拐点）时，改变symbol样式
qq_38918953的博客
10-30 6076
举例1：散点图 { name: '用户', type: 'scatter', symbol: 'emptyCircle', symbolSize: 8, itemStyle: { // 线和拐点的颜色 color: '#0072FF', //图例的颜色
echart-可视化大屏.zip
04-26
- **创建图表实例**：使用 `echarts.init` 方法初始化图表容器。 - **配置图表**：设置图表类型、数据、轴、标签、提示框等各种属性。 - **加载图表**：调用 `setOption` 方法，传入配置项，加载图表。 - **响应...
angular echart-js统计数据图表读取投屏显示代码.zip
07-11
js代码 [removed][removed] [removed][removed] [removed][removed] ... $(this).attr('class', "ym-active...angular echart.js统计数据图表读取投屏显示代码，html5统计图表实现数据投屏页面显示效果。
ec-canvas 实现echart图表显示
05-19
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
echarts图表离线所需js文件-echarts-gl.min.js
10-22
echarts图表离线所需js文件-echarts-gl.min.js echarts本资源转载自网络，如有侵权，请联系上传者或csdn删除
echarts-amap.min.js
04-14
百度echart图表插件结合高德地图中所需要的amap文件。echarts针对高德地图所使用的amap方法，用于echarts地图创建，带完整演示文档。
个人笔记 给hover 伪类 恢复默认值
weixin_30845171的博客
05-16 354
pointer-events: none; 转载于:https://www.cnblogs.com/chen527/p/10876441.html
前端Echarts 柱状图实现hover每个柱时 显示不同文字信息
well41315213的博客
04-03 4497
function initChart4(groupCodeArr, groupIdArr, dataRed, dataYellow, dataGreen) {        // 基于准备好的dom，初始化echarts实例        var myChart4 = echarts.init(document.getElementById('echart_donut4'));        //...
Echarts 柱状图 hover阴影部分可触发点击事件
赵乘风_i
12-07 4471
可以点击整个柱状图的hover区域，也就是某个柱子的空白区域在hover之后，也是可以点击的 数据可视化，图表展示区域点击
Echarts 问题解决 —— 环状饼图默认显示第一条数据及提示框、鼠标移动上去后不突出、中间展示指定样式数字、鼠标移到扇形上显示不同颜色的数字、循环高亮显示饼图各模块的扇形；
Lyrelion的博客
01-04 5799
目录 1.环状饼图默认显示第一条数据及提示框 2.环状饼图鼠标移动上去后不突出显示 3.环状饼图中间展示指定样式数字 4.环状饼图鼠标移到图例上显示不同颜色的数字 5.环状饼图循环高亮显示饼图各模块的扇形 6.formatter、rich 结合 7.折点无法完全显示 8.设置时延后图表不显示 1.环状饼图默认显示第一条数据及提示框 效果展示： // 默认展示第一条数据的提示框 myChart.dispatchAction({ type: 'showTip', seriesI..
echart 柱状图 带箭头 调整柱子宽度 设置柱子颜色 hover时改变柱子颜色
weixin_30776545的博客
09-05 303
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>echart 柱状图 带箭头 调整柱子宽度 设置柱子颜色 hover时改变柱子颜色</title>...
echarts环形图数据展示
m0_46383567的博客
04-26 1429
<template> <div class="PassengerOringin"> <div class="title">乘客来源</div> <div id="piechart" style="width:230px;height:230px;"></div> </div> </template> <script> import echarts from..
echarts鼠标悬浮，tooptip展示新的图表，点击移出图表，保留高亮选中的图形并显示 tooltip
qq_42103673的博客
05-14 1193
options配置： { tooltip: { padding: 3, backgroundColor: '#ffffff', enterable: true, formatter: function(params, ticket, callback) { var htmlStr = `<div id="tooltipChart" ref='tooltipEchart' ...
Echarts X轴（xAxis）
Erek的前端博客；
09-03 7507
xAxis: { show: true, // 是否显示 x 轴 position: 'top', // x 轴的位置（'top'，'bottom'） type: 'category', // 坐标轴类型 nameRotate: 10, // 坐标轴名字旋转，角度值 inverse: false, // 是否是反向坐标轴 boundaryGap: ['20%', '20%'], // 坐标轴两边留白策略 spli.
echart 注意事项-初始化和销毁
05-26
在使用 ECharts 前，需要先进行初始化。一般情况下，初始化的步骤如下： 1. 引入 echarts.js 文件。可以从官网下载或使用 CDN 引入。 2. 准备一个具有宽高的 DOM 容器。 3. 在 JS 中创建 ECharts 实例，并将其与 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值