echars 功能说明

最新推荐文章于 2023-07-23 16:40:38 发布
最新推荐文章于 2023-07-23 16:40:38 发布
阅读量242 收藏
点赞数
分类专栏： echars
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45502613/article/details/118361407
版权

1.设置一个或者多个y轴对齐
实例
在这里插入图片描述

方法代码

function _getMaxValue(arr) {
    const max = Math.max(...arr);
    // 这样处理是为了不让最大值刚好到坐标轴最顶部
    return Math.ceil(max / 9.5) * 10;
}
function _getMinValue(arr) {
    const min = Math.min(...arr);
    // 这样处理是为了不让最大值刚好到坐标轴最底部
    return Math.floor(min / 12) * 10;
}

使用代码

 mainStat(seriesData,changeData,xAxisData){
            var chartDom = document.getElementById('mainStat');
            var myChart = echarts.init(chartDom);
            var option;

            // let seriesData = []
            // let changeData = []
            // let xAxisData = []
            // xAxisData=getdiffdate(this.cTimeData[0],this.cTimeData[1],7);
            // seriesData = [12442,2314,1241,4442,5234,9563,4223]
            // changeData = [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
              // console.log(xAxisData);
            
            const min1 =_getMinValue(changeData),
                min2 = _getMinValue(seriesData),
                max1 = _getMaxValue(changeData),
                max2 = _getMaxValue(seriesData);
            option = {
                grid:{
                    x:40,
                    y:30,
                    x2:35,
                    y2:40,
                    containLabel:true
                    // borderWidth:1,
                },
                // legend: {
                //     x:'right',
                //     data: ['日常日志输出数量'],
                //     textStyle: {color: 'rgba(255, 255, 255, 0.5)'},
                // },
                tooltip:{
                    show:true,
                    trigger: 'axis',
                    formatter: function (params) {
                        var relVal = params[0].name
                        for (var i = 0, l = params.length; i < l; i++) {
                            if (params[i].seriesName=='变化率'){
                                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + '%'
                            }else {
                                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value
                            }

                        }
                        return relVal
                    }
                },
                xAxis: {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        interval:0,
                        rotate:20//角度顺时针计算的
                    },
                    // boundaryGap: false,
                    data: xAxisData,
                    lineStyle:{
                        //文字颜色
                        background: '#0C347C',
                        // color: 'rgba(235, 235, 235, 1)',
                        color: '#0C347C',
                        //字体风格,'normal','italic','oblique'
                        fontStyle:'normal',
                        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                        fontWeight:'bold',
                        //字体系列
                        fontFamily: "Microsoft YaHei UI",
                        //字体大小
                        fontSize:'15px',

                    },
                    axisLine: {
                        lineStyle:{
                            //文字颜色
                            color: '#1ADBFB',
                            // color: '#0C347C',
                            //字体风格,'normal','italic','oblique'
                            fontStyle:'normal',
                            //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                            fontWeight:'bold',
                            //字体系列
                            fontFamily: "Microsoft YaHei UI",
                            //字体大小
                            fontSize:'15px',

                        },
                    }
                },
                yAxis: [

                    {
                    name: '数量',
                    type: 'value',
                    plitNumber: 5,
                    interval: (max2 - min2) / 5,
                    min: min2,
                    max: max2,
                    splitLine: {
                        show: true,
                        lineStyle:{
                            color: ['rgba(221, 221, 221, 0.3)'],
                            width: 1,
                            type: 'solid'
                        },
                    },
                    axisLine: {
                        show: true,
                        lineStyle:{
                            //文字颜色
                            // background: '#0C347C',
                            color: '#908B8B',
                            //字体风格,'normal','italic','oblique'
                            fontStyle:'normal',
                            //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
                            fontWeight:'bold',
                            //字体系列
                            fontFamily: "Microsoft YaHei UI",
                            //字体大小
                            fontSize:'15px',

                        },
                    },
                },
                    {
                        type: 'value',
                        name: '变化率',
                        min: min1,
                        max: max1,
                        splitNumber: 5,
                        interval: (max1 - min1) / 5,
                        position: 'right',
                        splitLine: {
                            show: false,
                            lineStyle:{
                                color: ['rgba(221, 221, 221, 0.3)'],
                                width: 1,
                                type: 'solid'
                            },
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#908B8B'
                            }
                        },
                        axisLabel: {
                            formatter: '{value}%'
                        },

                    },
                ],
                series: [

                    {
                    name:'数量',
                    data: seriesData,
                    type: 'bar',
                    barWidth : 40,//柱图宽度
                   itemStyle: {
                            borderColor:"#00C1DE",
                            borderWidth:3,
                            barBorderRadius:15,

                            normal: {
                                label: {
                                    show: true,      //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: {     //数值样式
                                        color: '#fff',
                                        fontSize: 16
                                    }
                                },
                                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(0, 168, 255,0.2)',
                                    border: '1px solid #7DD8FE',
                                },{
                                    offset: 0.34,
                                    color: 'rgba(143, 223, 254,0.5)',
                                    border: '1px solid #7DD8FE',
                                },{
                                    offset: 1,
                                    color: 'rgba(143, 223, 254,1)',
                                    border: '1px solid #7DD8FE',
                                }])
                            }
                        },


                },
                    {
                        name: '变化率',
                        type: 'line',
                        yAxisIndex: 1,
                        data: changeData,
                        symbolSize: 7, // 拐点圆的大小
                        label: {
                            show: true,
                            position: 'top',
                            formatter:  (a)=>{
                                return changeData[a.dataIndex]+'%'
                            },
                        },
                        symbol:'circle',
                        itemStyle : {
                            normal:{
                                color:'rgba(60,179,113,1)', //折点颜色
                                symbolSize:'rgba(60,179,113,1)',
                                lineStyle:{
                                    width: 2,
                                    color:'rgba(60,179,113,1)' //折线颜色
                                },
                            }
                        },
                        markLine : {
                            silent: true,
                            symbol:"none",//去掉箭头
                            lineStyle: {
                                color: '#333'
                            },
                            label:{
                                position:"end",         //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束

                            },
                            data : [
                                {
                                silent:false,             //鼠标悬停事件  true没有，false有

                                lineStyle:{
                                    //警戒线的样式  ，虚实  颜色
                                    // type:"solid",
                                    width:2,
                                    color:"#F9F900"
                                },
                                yAxis: "20"     //警戒线在y轴的坐标
                            },
                                {
                                    silent:false,             //鼠标悬停事件  true没有，false有
                                    lineStyle:{
                                        //警戒线的样式  ，虚实  颜色
                                        type:"solid",
                                        width:1,
                                        color:"#00fbfc"
                                    },
                                    yAxis: "0"     //警戒线在y轴的坐标
                                },
                                {
                                    silent:false,             //鼠标悬停事件  true没有，false有

                                    lineStyle:{
                                        //警戒线的样式  ，虚实  颜色
                                        // type:"solid",
                                        width:2,
                                        color:"#F9F900"
                                    },
                                    yAxis: "-20"     //警戒线在y轴的坐标
                                }
                            ]
                        },
                    },
                ]

            };

            option && myChart.setOption(option);

        },
太阳姐姐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ECharts 全局触发click点击事件（Label及柱状）
日常笔记/总结/系列知识梳理
06-09 7110
// 基于准备好的dom，初始化echarts实例 let myChart = this.$echarts.init(document.getElementById('myChart')); 前言 需求要点击Echart处理事件，通过myChart.on可实现，但只能点击柱状图才能触发，点击label(即：坐标文本)无法触发；通过myChart.getZr().on可全局监听Echart图，但无法准确的获取当前点击柱状的index；由此见下文 Echart图 Echart对象 option = {
layui隐藏域的监听事件_为了监听更多的鼠标事件，我们来「仿制」一个图例吧...
weixin_39637203的博客
12-03 203
最近看到了一个需求，想要监听图例元素的鼠标事件(不限于点击)，所以光靠监听「legendselectchanged」就不够用了。为此，打算尝试一下仿制图例简易版一开始，先做了个简易版直接改配置项的、不可复用的简易版思路很简单，就是用柱图的一个柱子充当图例，监听鼠标点击事件，触发「legendSelect」或者「legendUnSelect」动作：增加一个 gird，设定图例(柱图)所在直角坐标的位...
echarts 堆叠柱状图3d效果_ECharts 堆积木（砖块）游戏
weixin_39625468的博客
11-29 439
最近突发奇想，用 3D 的堆叠柱图，做了一个搭积木的小游戏。主要思路用一个几乎透明的 series-bar3D 铺满整个 grid3D，作为操作区，监听鼠标点击事件、完成堆积木的操作；用多层数据为 0 的 series-bar3D 放在操作层 bar3D 下方，堆积木时，按照从下向上的顺序，更新其数据 series-bar3D.data(包括数值和样式，即 value 和 itemSty...
Echarts 图表点击事件和图表容器中标签的显示.
xuboyuan11的博客
04-18 2462
Echarts 图表点击事件和图表容器中标签的显示.
echarts map地图 自定义label上添加文字及图片覆盖物
qq_40295815的博客
11-12 1万+
{ name: '', type: 'effectScatter', left: '50', coordinateSystem: 'bmap', // 不是这个底层的换成 geo层即可 data: convertData(data), symbolSize: '20', showEffectOn: 'render', rippleEffect:.
echarts 水滴图的功能说明文档和demo
05-29
echarts 水滴图的功能说明文档和demo，里面有一些水滴图的demo。
Vue + Echarts 实现中国地图多级钻取功能.zip
08-01
本文为 Vue 2.x + Echarts 5.x 实现中国地图多级钻取功能（基本版 未做过多功能拓展和样式优化 便于二次开发）。（更多说明移步：https://blog.csdn.net/ZYS10000/article/details/119298354）
基于echarts的股票当天走势曲线展示项目源码+项目说明.zip
最新发布
04-09
【资源说明】 1、该资源包括项目的全部源码，下载可以直接使用！ 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为...基于echarts的股票当天走势曲线展示项目源码+项目说明.zip
Echarts 实现树状图的展示与编辑示例
07-14
功能说明： 当鼠标移动到节点上时，会有节点描叙信息提示框。 当在节点处右键时，会弹出右键编辑菜单。 当鼠标单击节点以外区域时，会隐藏右键编辑菜单。 节点动作包含： 增加子节点，删除子节点，删除当前节点，...
解决Echarts地图区域点击事件无效 && geo.lable.formatter无效
Zaqenenen的博客
03-07 6479
需求：获取echarts当前点击城市名称 bug：Echarts地图区域点击事件无效，添加.getZr()后又无法获取到地图当前点击城市。 这个我看了一些资料，说是版本问题，，，然鹅我下了几个最新echarts版本都无效。怀疑是我加了自定义区域让它点不中了？？ 解决： //添加.getZr()之后，又获取不到params中当前点击城市 let self=this; this.chart.getZr().on('click', function (params) { console.log('好的终于点击到
vue3+TS项目引用Echarts
qq_43751614的博客
06-29 1090
2、第二步：在main.ts引入。1、第一步：安装echars。
Echart柱状图x轴label显示文本与图片
YanHSama的博客
01-09 2367
柱状图x轴label显示图片效果如下: 配置信息 import EchartInit from '@/components/EchartInit'; const IMG = [ 'https://scpic.chinaz.net/Files/pic/icons128/8328/h1.png', 'https://scpic.chinaz.net/Files/pic/icons128/8319/w2.png', 'https://img0.baidu.com/it/u=3119542616,
echarts 饼状图 label 既在内部显示数值（百分比），又显示外部指示线
二三的博客
02-22 1万+
配置项，可以看出，series 是一个数组（如上图所示），既然单个中只能出现一个，那么我配置成 2个（多个）相同的对象，让他们重合，就会出现两个 label 标签，一个在内部展示，一个在外部展示，就可以完美解决这种情况。其中，formatter 是标签内容的格式器，用于转换格式。series 中（即其中的一个对象中），只能设置一个label。属性 是 用来配置 外部指示线（第一段、第二段）的长度及样式的。不过也好解决，通过查看 echarts 官网。查了下 Echarts 官网文档，需要配置。
echarts柱状图的label设置，动态设置position
热门推荐
yinge0508的博客
12-18 2万+
先看效果：图一： 图二： 数值大于零的在x轴上方，label在柱状图上方，小于零的在x轴下方，label在轴下方；相关代码如下： <template> <div> <ChartTitle :name="config.titleName1" /> <div id="areaRate"></div> <ChartTitle :name="config.titleName2" /> ..
Echarts图表 饼图常见的效果
前端开发小白9527
04-28 1142
1 显示数值效果series 下的label 饼图的文字显示 2 半径 圆环 radius 3 南丁格尔图 roseType: 'radius' 数值越大半径越大 4 选中效果 selectedMode 注意点: 1 不需要设置 x轴和y轴 2 饼图的所需要的数据 是个数组 数组里面放对象 对象则必须包含name和value， <!DOCTYPE html> <html lang="en"> <head> <meta cha..
vue3使用echarts时echarts.init(chartDom)报错
anthony6ixi6的博客
04-13 1334
在vue3中使用echarts时报错 报错原因应该是ts认为有可能获取不到chartDom 使用!排除chartDom为null或undefined的情况即可
echarts 点击任意位置获取 Y 轴数据
FunnyWhiteCat的博客
07-23 1394
echarts 点击任意位置获取 Y 轴数据
使用 echarts 画折线面积图
一万年太久，只争朝夕
09-23 1260
在PPT自带图表不能满足自身需求的情况下，作为一名IT人士，采用前端的一些库来画图是一个非常不错的选择，我此次选择的是 echarts 这个库，涉及知识点记录如下，方便后续快速查阅： 设置数据标签 设置字体大小 设置轴线留白 设置面积图渐变色 代码 代码如下，快速画图地址 option = { xAxis: { type: 'category', boundaryGap: true, // 设置为false代表是零刻度开始，设置为true代表离零刻度间隔一段距离
echart折线图扩大点击区域并获取当前点的索引及数据
haoxinqing222的博客
04-18 1924
我们期望在鼠标随便点击的情况下，可以自动找到最近节点的数据，做一些事情，而不是去费力费眼的去找那个小小的折线节点点击。只有用户点击到点（对就是那个小小折线节点）的时候才能拿到返回数据或者进行下一步操作！2、在点击事件中获取索引去做一些事情。通常对echats做点击事件的时候。1、获取到当前节点的一些数据。
echarts 树图
08-20
总之，echarts树图是一种功能强大的数据可视化工具，可以用于展示树形结构的数据关系，并且可以通过配置参数和使用相关的js脚本实现各种交互功能。<span class="em">1</span><span class="em">2</span><span class=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值