jquary+echarts完成图表创建以及给tooltip添加垂直的虚线辅助线

最新推荐文章于 2023-04-04 13:48:57 发布

达嘘

最新推荐文章于 2023-04-04 13:48:57 发布

阅读量3k

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/weixin_42253152/article/details/80545687

版权

前端学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

先附上预期效果图片

echarts 使用起来还是比较方便的，创建图表的时候先导入

</head>

//然后指定你要创建图表所在的div
<body>

</body>

//在javascript中完成初始化

var aerobic = echarts.init(document.getElementById('aerobic'));

loadBarChart2(aerobic,"有氧运动分钟",600,0,120,3,timedata1,aerobicdata,"#C0E4FF");

//加载年柱状图
   function loadBarChart2(lineChart,text,max,min,interval,width,timedata,data,color) {
          lineOption = {
                    title: {
                        text: text,
                        //标题样式设置
                        textStyle:{
                           fontSize:15,
                           fontFamily: '微软雅黑',
                           fontWeight: 'normal',
                           color:'#b1b1b1'
                        }

tooltip: {

trigger: 'axis',

//这里给tooltip添加了垂直的辅助虚线

                        axisPointer: {
                            type: 'line',
                            lineStyle: {
                                type: 'dashed'
                              }
                            }
                    },
                    grid: {
                        left: '0%',
                        right: '0.5%',
                        bottom: '0%',
                        top:'20%',
                        containLabel: true
                    },
                    //X轴设置
                    xAxis: {
                       axisTick: {
                                show: false
                            },
                        type : 'category',
                        //网格线
                        splitLine: {
                           show:false,
                           lineStyle: {
                                 // 使用深浅的间隔色
                                 color: ['#b1b1b1']
                             }
                    },
                        axisLine:{
                            lineStyle:{
                                color:'#b1b1b1',
                                width:1,//这里是为了突出显示加上的
                            }
                        },
                        axisLabel : {
                           interval:8,//横轴信息全部显示
                            textStyle: {
                                color: '#b1b1b1'
                            }
                        },
                        //X轴数据
                        data : timedata
                    },
                    //Y轴设置
                    yAxis: {
                       axisTick: {
                                show: false
                            },
                        type : 'value',
                        max:max,//Y轴最大值
                        min:min,//Y轴最小值
                        interval:interval,//增长间隔
                        //Y轴网格线
                        splitLine: {
                        show:true,
                          lineStyle: {
                                // 使用深浅的间隔色
                                color: ['#b1b1b1']
                            }
                      },
                        axisLine:{
                            lineStyle:{
                                color:'#b1b1b1',
                                width:1,//这里是为了突出显示加上的
                            }
                        },
                        axisLabel : {
                           interval:0,//Y轴信息全部显示
                            textStyle: {
                                color: '#b1b1b1'
                            }
                        }
                    },
                    series: [{
                       name: text,
                        type: 'bar',
                        barMaxWidth: width,
                        stack: text,
                        itemStyle: {
                            normal: {
                                color: color
                            }
                        },
                        //Y轴数据
                        data: data,
                    },
                    ]
               };
          //加载图表
          lineChart.clear();
          lineChart.setOption(lineOption );

}

</script>

达嘘

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jquary+echarts完成图表创建以及给tooltip添加垂直的虚线辅助线

先附上预期效果图片echarts 使用起来还是比较方便的，创建图表的时候先导入&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;&lt;meta charset="utf-8"&gt;&lt;script type="text/javascript" sr
复制链接

扫一扫