首页 > 其他分享 >echarts折线图 x 轴 y 轴不展示 背景图为网格 鼠标划上样式修改等

echarts折线图 x 轴 y 轴不展示 背景图为网格 鼠标划上样式修改等

时间:2024-04-11 17:47:09浏览次数:18  
标签:lineStyle false show color type true 折线图 背景图 echarts

:header-cell-style="{backgroundColor:'#F6F8F9', color: '#333',textAlign:'center'}"   要求1、折线为渐变色   2、折线区域渐变色   3、x 轴 y轴不展示    4、折线图背景为网格       5、鼠标划上样式修改  

 const option = {
                    title: {
                        text: '折线图'
                    },
                    xAxis: {
                        type: 'category',
                        // boundaryGap: false, true时用在柱状图比较合适 可以保证刻度线和标签对齐
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                        axisTick: {show: false},//不展示坐标轴刻度
                        splitLine: {  
                            show: true,       //展示背景图
                            lineStyle: {
                                type: 'dashed',  
                                color: '#ccc'
                            }
                        },
                        axisLabel: {
                            // 设置x轴文字颜色、字体大小、字体风格
                            color: '#b3b3b3',
                            fontSize: 11,
                            fontFamily: 'SourceHanSansCN-Light'
                        },
                        axisLine: {
                            show: false
                        }
                    },
                    grid: {
                        // 设置表格偏移量
                        top: '10.5%',
                        left: '5%',
                        right: '8%',
                        bottom: '7%',
                        containLabel: true
                    },
                    yAxis: {
                        position: 'left',
                        scale: true,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                                color: '#ccc',
                                cap: 'butt'

                            }
                        },
                        axisTick: {
                            show: false
                        },
                        type: 'value',
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#b3b3b3'
                            }
                        },
                        axisLabel: {
                            margin: 10,
                            textStyle: {
                                fontSize: 12
                            }
                        }
                    },
                    series: [
                        {
                            data: [820, 932, 901, 934, 1290, 1330, 1320],
                            type: 'line',
                            symbol: 'emptyCircle',
                            symbolSize: 10,
                            sampling: 'lttb',
                            smooth: true,
                            // 隐藏折点
                            showSymbol: false,
                            // 改变线条的颜色和粗细
                            lineStyle: {
                                width: 5
                            },
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [ // 渐变颜色
                                        {
                                            offset: 0,
                                            color: '#DFECFE'
                                        },
                                        {
                                            offset: 1,
                                            color: '#F5FAFE'
                                        }
                                    ],
                                    global: false
                                }
                            }
                        }
                    ],
                    tooltip: {
                        trigger: 'axis',
                        showDelay: 0,
                        backgroundColor: 'rgba(0,0,0,0.05)',
                        // formatter: '{b}<br/>总年化成本 : {c}', 普通展示样式
                        padding: [5, 25],
                        axisPointer: {
                            type: 'line',
                            lineStyle: {
                                color: '#6499FF',
                                width: 3,
                                type: 'dashed'
                            }
                        },
                        textStyle: {
                            color: 'black',
                            align: 'left',
                            fontSize: 14
                        },
                        position: 'left',
                        formatter: (v) => {
                            const value1 = v[0].name;
                            const value2 = v[0].value;
                            return `<div>
                              <span>${value1}</span><br />
                              <p style=\"display:inline-block;;border-radius:3px;width:100%;
                              height:30px;background-color:white;line-height:30px;padding:0 20px;\">总年化成本: ${value2}</p><br /> 
                              </div>`;
                        }
                    },
                    itemStyle: {
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {offset: 0, color: '#6850F8'},
                            {offset: 0.5, color: '#4989FD'},
                            {offset: 1, color: '#66DEFF'}

                        ])
                    }
                };

 

 

标签:lineStyle,false,show,color,type,true,折线图,背景图,echarts
From: https://www.cnblogs.com/qing1224/p/18129729

相关文章

  • echarts地图默认高度
    echarts地图如果不设置默认高度,地图绘制的时候一直有个默认100px,即使地图的父级都设置了width:100%;height:100%;地图还是不能在高度上继承父级高度。除非你给父级一个确定的高度,比如200px这种。所以解决办法来了,你可以试试width:100%;height:100vh:这里的100vh就拿到了浏览器......
  • 数据可视化-ECharts Html项目实战(11)
    在之前的文章中,我们学习了如何在ECharts中特殊图表的双y图以及自定义形状词云图。想了解的朋友可以查看这篇文章。同时,希望我的文章能帮助到你,如果觉得我的文章写的不错,请留下你宝贵的点赞,谢谢。数据可视化-EChartsHtml项目实战(10)-CSDN博客文章浏览阅读775次,点赞20次,收藏16次......
  • echarts X轴类目名太长时隐藏,hover时显示全部
    echarts图表X轴在柱状图中,X轴类目名如果数据太长;echarts会默认进行隐藏部分字段;如果我们想让每一个类目名都显示出来,需要进行额外的处理X轴类目名太长时,默认只显示一部分类目名<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="......
  • [echarts]vue2项目中折柱图-柱形图伪3d效果实现
    不知道是不是现在的版本更新了,echarts-gl在vue2项目中不能适配使用,难蹦一.需求分析与设计思路项目当中遇到改版升级,想要实现如下的一下折柱图的立体效果想在原来平面柱状图的基础上,有立体的效果.本来打算用echarts-gl库来实现3d版的柱形图,但是引入和配置后,浏览器总是......
  • 【可视化大屏开发】17. 加餐-ECharts定制省份地图
    各身份地图数据下载小工具DataV.GeoAtlas地理小工具系列 登录DataV后,直接通过选择点击获取需要的省份地区数据>其实单击即可完成选择检查下载的数据格式是否正常自定义字体更新地图部分代码index.less部分//声明字体@font-face{font-family:electron......
  • echarts里的矩形树状图
    echarts的作图的准备工作就不演示了,可以自行看下面的博文Ecarts的基础示例(条形图,堆积柱状图,瀑布图,饼图,环形图)-CSDN博客一、引入js<scriptsrc="/js/echarts.min.js"></script>下载地址echarts/dist/echarts.min.jsatmaster·apache/echarts·GitHub二、为ECha......
  • echarts可拖拽折线图,拐点拖拽/点击定位/整体平移
    1.拐点拖拽,只有点击拐点才可以拖拽,并且限制了只能在当前X轴进行拖拽//chart myChart(){ constthat=this letsymbolSize=20; letdata=newArray(); letdataReal=newArray(); //this.real letlist=this.plan; letr......
  • 前端全栈echarts实时制作。node.js写后端api接口。
    首先先介绍一下我这个实时可视化的流程:先写后端→写html网页结构→echarts画图→获取api接口数据→做实时可视化。总体来说就是要做一个实时可视化。不说怎么多了我直接开始操作,这次可能不会一下全部写完,但后面会接着继续完善此博客呢。一:node.js写api接口非常的简单,直接一......
  • 利用pyecharts实现地图下钻
    参考地址:利用pyecharts实现中国省与市之间的跳转_pyecharts点击地图跳转-CSDN博客代码:importcsvimportjionlpasjiofrompyechartsimportoptionsasoptsfrompyecharts.chartsimportMapfromcollectionsimportCounterimportrandomfrompyecharts.globalsimp......
  • python画带阴影折线图
    (1)#coding=gbkimportmatplotlib.pyplotaspltimportnumpyasnp#创建一些示例数据x=np.linspace(-3,3,60)y_mean=np.sin(x)y_std=np.sin(x)#画折线图b-:蓝色实线plt.plot(x,y_mean,'b-',label='Mean')#填充阴影表示标准差alpha:阴影......