echarts的lenged

最新推荐文章于 2023-11-10 15:43:39 发布
最新推荐文章于 2023-11-10 15:43:39 发布
阅读量162 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43353869/article/details/111229752
版权 
for(var i=0;i<9;i++){
    if(Math.round(Math.random()*99+1)==100){
        console.log("12");
  }
}

utils.js文件里封装了一个公共方法并抛出


// 字符串

js中数组Array的排序(sort)var arrDemo = new Array();

 arrDemo[0] = 10;
 arrDemo[1] = 50;
 arrDemo[2] = 51;
 arrDemo[3] = 100;

 arrDemo.sort(); //调用sort方法后，数组本身会被改变，即影响原数组

 alert(arrDemo);//10,100,50,51 默认情况下sort方法是按ascii字母顺序排序的，而非我们认为是按数字大小排序

 arrDemo.sort(function(a,b){return a>b?1:-1});//从小到大排序

 alert(arrDemo);//10,50,51,100

 arrDemo.sort(function(a,b){return a<b?1:-1});//从大到小排序

 alert(arrDemo);//100,51,50,10

 数组调用sort后,会影响本身(而非生成新数组)
 sort()方法默认是按字符来排序,所以在对数字型数组排序时,不可想当然按照大小排序
 要改变默认的sort行为(即按字符排序),可以自行指定排序规则函数

 利用for循环排序
 // 从小到大顺序排序
    minSort (arr) {
      var min
      for (var i = 0; i < arr.length; i++) {
        for (var j = i; j < arr.length; j++) {
          if (arr[i].coupon.faceMoney > arr[j].coupon.faceMoney) {
            min = arr[j]
            arr[j] = arr[i]
            arr[i] = min
          }
        }
      }
      return Arr
    }

从大到小：

getMaxSort: function (arr) {
      var max
      for (var i = 0; i < arr.length; i++) {
        for (var j = i; j < arr.length; j++) {
          if (arr[i].coupon.faceMoney < arr[j].coupon.faceMoney) {
            max = arr[j]
            arr[j] = arr[i]
            arr[i] = max
          }
        }
      }
      return arr
    }

去重：
Array.from(new Set(数组))
原数组：【1，2，3，5，3，2】
去重后：[1,2,3,5]

求js数组的最大值和最小值的方法
1.字符串拼接法
利用toString和join数组转换字符串,在和Math的max和min方法进行拼接,最后值eval方法
var ary = [54,65,43,21,12,34,45,58,97,24];
var maxN = eval("Math.max(" + ary.toString() + ")");
var minN = eval("Math.min(" + ary.toString() + ")");

var maxN = eval("Math.max(" + ary.join() + ")");
var minN = eval("Math.min(" + ary.join() + ")");

排序法
先把数组从小到大排序,数组第一个即为最小值,最后一个即为最大值
var arr=[10,20,40,50,80,10,5]
arr.sort(function(a,b){return a-b})
var minN =arr[0]
var max = arr[arr.length-1

3.假设法
假设数组第一个为最大值(或最小值),后边进行比较,如果后边的值比最大值大(或比最大值小),则替换最大值(或最小值)
var arr1=[10,20,80,100,90,70]
var maxN=ary[0];
var minN=ary[0];
for(var i=0;i<arr1.length;i++){
	if(maxN<arr[i]){
		maxN=arr[i]
	}
}

4.Math的max和min方法

// if(v[0]!=undefined&&v[0].seriesName){
                                //     seriesName=v[0].seriesName
                                // }
                                // if(v[0]!=undefined&&v[0].value){
                                //     value=": "+v[0].value+"%";
                                //     // console.log(value,"val");
                                //     showDic+=  '<div>'+Toziname+"<br/>"+
                                //         '<span style="display:inline-block;width: 10px;height: 10px;border-radius:50%;background:rgba(34, 119, 112, 1);margin-right: 5px"></span>'+seriesName+value
                                //     '</div>'
                                // }else{
                                //     showDic+=
                                //         '<div style="display:none">'+Toziname+"<br/>"+
                                //         '<span style="display:none;width: 10px;height: 10px;border-radius:50%;background:rgba(34, 119, 112, 1);margin-right: 5px"></span>'+seriesName+value
                                //     '</div>'
                                // }
                                // // seriesName1=v[1].seriesName;
                                // if(v[1]!=undefined&&v[1].seriesName){
                                //     seriesName1=v[1].seriesName
                                // }
                                // if(v[1]!=undefined&&v[1].value){
                                //     value1=": "+v[1].value+"%";
                                //     // console.log(value1,"value1");
                                //     showDic+= "<br/>"+
                                //         '<span style="display:inline-block;width: 10px;height: 10px;border-radius:50%;background:rgba(222, 235, 110, 1);margin-right: 5px"></span>'+seriesName1+value1
                                //         +"<br/>"
                                // }else {
                                //     showDic+=  '<div style="display:none">'+Toziname+"<br/>"+
                                //         '<span style="display:none;width: 10px;height: 10px;border-radius:50%;background:rgba(222, 235, 110, 1);margin-right: 5px"></span>'+seriesName1+value1
                                //         +"<br/>"
                                // }
                                // value1=v[1].value;
                                // color1=v[0].color.colorStops[0].color;
                                // return '<div>'+Toziname+"<br/>"+
                                //     '<span style="display:inline-block;width: 10px;height: 10px;border-radius:50%;background:rgba(222, 235, 110, 1);margin-right: 5px"></span>'+seriesName1+value1
                                //     +"<br/>"+
                                //     '<span style="display:inline-block;width: 10px;height: 10px;border-radius:50%;background:rgba(34, 119, 112, 1);margin-right: 5px"></span>'+seriesName+value
                                // '</div>'



 formatter(v){
                                var Toziname="", seriesName="", seriesName1="",
                                    value="",value1="",names="";
                                Toziname=v[0].name;
                                var showDic = '';
                                if(v[0]!=undefined&&v[0].value){
                                    value=v[0].value
                                }else{
                                    value=""
                                }

                                if(v[0]!=undefined&&v[0].seriesName){
                                    seriesName=v[0].seriesName+": "
                                }else{
                                    seriesName=""
                                }

                                if(v[1]!=undefined&&v[1].value){
                                    value1=v[1].value+"%"
                                }else{
                                    value1=""
                                }

                                if(v[1]!=undefined&&v[1].seriesName){
                                    seriesName1=v[1].seriesName+": "
                                }else{
                                    seriesName1=""
                                }
                                if(fla1==true){
                                    showDic+=  '<div>'+Toziname+"<br/>"+
                                        '<span style="display:inline-block;width: 10px;height: 10px;border-radius:50%;background:rgba(34, 119, 112, 1);margin-right: 5px"></span>'+seriesName+value
                                    '</div>'
                                }

                                if(fla2==true){
                                    if(fla1==false){
                                        seriesName1=v[0].seriesName+": ";
                                        value1=v[0].value+"%";
                                        names=Toziname
                                    }
                                    showDic+= names+"<br/>"+
                                        '<span style="display:inline-block;width: 10px;height: 10px;border-radius:50%;background:rgba(222, 235, 110, 1);margin-right: 5px;"></span>'+seriesName1+value1
                                        +"<br/>"
                                }

                                return showDic
                            }
                        },


                        '<div>'+Toziname+"<br/>"+
                                    '<span style="display:inline-block;width: 10px;height: 10px;border-radius:50%;background:rgba(168, 143, 230, 1);margin-right: 5px"></span>'+seriesName1+value1
                                    +"<br/>"+
                                    '<span style="width: 10px;height: 10px;border-radius:50%;background:rgba(222, 235, 110, 1);margin-right: 5px;display: inline-block" id="box2"></span>'+seriesName2+value2
                                    +"<br/>"+
                                    '<span style="display:inline-block;width: 10px;height: 10px;border-radius:50%;background:rgba(0, 255, 241, 1);margin-right: 5px"></span>'+seriesName+value
                                '</div>'



                                     if(v[2]!=undefined&&v[2].value){
                                    value2=": "+v[2].value+"%";
                                    // console.log(document.getElementById("box2"));
                                    // setTimeout(()=>{
                                    //     document.getElementById("box2").style.display="inline-block"
                                    // },1000)
                                }else {
                                    // setTimeout(()=>{
                                    //     document.getElementById("box2").style.display="none"
                                    // },10)
                                }
                                // seriesName2=v[2].seriesName || '';

// 点击legend
var LeftChart = echarts.init(document.getElementById('u-qsfx-left1'));
// legendselectchanged eharts自带的事件

点击图表标题
{name: "年度计划投资", selected: {…}, type: "legendselectchanged"}
name: "年度计划投资"
selected: {年度计划投资: false, 实际完成投资: true, 项目数: true}
type: "legendselectchanged"
__proto__: Object

设置一个变量
var fla1=true fla2=true
LeftChart.on('legendselectchanged',function(item){
	if(item.name=="年度投资"){
		fla1=!fla1
	}else if(item.name="项目数"){
		fla2=!fla2
	}
})


// 第三个图鼠标放上去,显示相应的内容,点legend的内容显示相应的内容
  option = {
                        tooltip: {
                            trigger: "axis",
                            // show: true,
                            // extraCssText:"width:20%;height:60px",
                            axisPointer: {
                                type: "shadow",
                                label: {
                                    show: true,
                                    extraCssText:"width:100px;height:60px",
                                }
                            },

                            formatter(v) {
                                // debugger;
                                var str = '';
                                if (v != null || v != '') {
                                    str=v[0].name
                                    for (var i = 0; i < v.length; i++) {
                                        // i=0 就是第一条的时候,
                                        // if (i == 0) {
                                        //     str = '';
                                        //     str = str + '<div>' + v[i].name + '<br/>' + '<span style="display:inline-block;width: 10px;height: 10px;border-radius:50%;background:' + v[i].color.colorStops[0].color + ';margin-right: 5px"></span>' + v[i].seriesName + ": " + v[i].value + "%";
                                        // } else {
                                        //     str='';
                                            str += '<div>' + '<span style="display:inline-block;width: 10px;height: 10px;border-radius:50%;background:' + v[i].color.colorStops[0].color + ';margin-right: 5px"></span>' + v[i].seriesName + ": " + v[i].value + "%";
                                        // }
                                    }
                                    str = str + "</div>";
                                }
                                return str;
                            }
                        },
hardwork come on
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
对echarts压缩包进行修改当legend过多时可以进行翻页
08-10
对echarts压缩包进行修改，当legend过多时，可以进行翻页
echarts中legend的文本换行
forteenBrother的博客
04-25 1万+
UI要求是这样的，但是出来的legend的text是在同一行 开始想用</ br>，但是未生效，后来改成了\n换行符，就搞定了 legend: { left: 'right', width: '60%', top: 'center', itemWidth: 16, itemHeight: 10, ..
echarts柱状图X轴文字过长换行显示
EnidChann的博客
08-25 3811
// 在option的xAxis的axisLabel里添加配置 axisLabel: { // rotate: '45', interval: 0, color: '#767676', fontSize: 12, // x轴文本换行 formatter: function (params) { var newParamsName = '' // 最终拼接成的字符串 var paramsNameNu
echarts lengend格式化和换行
TarkuNi的博客
06-29 5856
想要的效果：lengend即格式化又换成两行 第一步：格式化文字部分： formatter:function(name){ letdata=[{"name":"20岁以下","value":"500"},{"name":"20-40岁","value":"2"},{"name":"40-60岁","value":"1"},{"name":"60岁以上","value":"0"}] lettotal=0; letta...
echarts图表开发中遇到的问题总结。比如：设置断点，legend换行，x轴固定值以及修改样式
weixin_48400717的博客
02-08 3670
折线图：断点
echarts legend 排列问题
05-14
legend 图例组件可以分组展示。详细说明：https://blog.csdn.net/qq_36437172/article/details/106125254
在echarts中图例legend和坐标系grid实现左右布局实例
09-16
主要介绍了在echarts中图例legend和坐标系grid实现左右布局实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
ECharts多行文字两端对齐饼图.zip
09-03
ECharts多行文字两端对齐 - 饼图
Angularjs-echarts 点击事件
03-20
Angular-echarts是 wangshijun对echarts利用Angular封装的组件，github地址https://github.com/wangshijun/angular-echarts。附件只是在源码例子里上添加了点击事件。
Echarts—自定义图例布局样式和图例换行的实现
前端探险家的博客
06-13 5249
之前做过各种各样需求的Echarts图表，通过查找博客和查看官网配置项api，都能实现，但是很久不用的话，再去做某些一样功能需求的图表，有些配置项还是需要反复查看，或者去搜索，所以我特意开了一个可视化专栏，去把使用过的可视化记录下来，也方便日后自己复用或者为他人提供便利！这次就记录一下自定义图例布局样式和图例换行的实现，我会把整个图表实现的代码都带出来，如果日后项目中用到类似的需求，也可以直接拿去！案例实现如下图；legend : {
解决echarts 坐标轴太长无法显示的问题
yingzizizizizizzz的专栏
05-25 8039
问题 可以很明显看出来，纵坐标的label太长了，label显示不全。 解决方法一： 如果图的大小不固定，可以随意的话，可以利用这个图来解决。设置x的大小就行。 解决方法二： 一般在实际应用中，会给图表分配规定的区间。这时，方法一就不太实用了，所以我们可以通过根据纵坐标的字数来换行达到全部显示的效果。 在yAxis属性中添加如下代码即可。 axisLabel:{
echarts lengend 换行
weixin_45152848的博客
07-02 1138
legend: { type: 'scroll', orient: 'vertical', icon: 'circle', formatter: function (name) { if(name && name.length > 26){ var str1 = name.substring(0, 26) var str2 = name.substring(26) na
echarts legend太多换行显示及legend每个标签文字过长分两行显示的间距调整问题
热门推荐
qq_34672907的博客
10-15 5万+
最近在做大数据相关的东西，用到了echarts，然后遇到了有10个legend，要分左右显示，并且每五个字换行显示问题。 前者很快就解决出来了，后者换行显示的话文字挨得很近，怎么办呢，第一反应自己搞不定，那就百度看看有没有解决方案，结果一大堆都是说前者分左右换行显示，后者没有百度到做法，所以只能自己上啦。废话不多说上代码 "legend": [{ "icon": "circle", "r...
ECharts图例换行及对齐问题解决方法
weixin_48911357的博客
05-23 1万+
ECharts图例换行及对齐问题解决方法
Echarts中legend按钮换行
Match_的博客
10-19 1387
Echarts中legend按钮换行 记录一下： Echarts中legend按钮换行 legend:[ { data:['一','二','三'] }, { top: '20', data:['四','五','六'] } ],
echarts中legend如何换行
weixin_30776863的博客
02-11 4494
lengend data数据中若存在''，则表示换行，用''切割。 转载于:https://www.cnblogs.com/jichi/p/10360851.html
echarts 图例lengend滚动翻页修改颜色
最新发布
hantanxin的专栏
11-10 795
pageIconInactiveColor: '#2f4554', // 翻页按钮不激活时（即翻页到头时）的颜色。pageIconColor: '#aaa', // 翻页按钮的颜色。pageTextStyle: { // 图例页信息的文字样式。官网一般默认浅色背景，如果深色背景需要做下修改，关键的是。
echarts 定制legend内容，显示和位置
qq_45030898的博客
04-19 1万+
echarts 定制legend内容，显示和位置1.type(当图例很多的时候可以用到)2.orient(图例的排版方向)3.top,bottom,left,right(图例在容器中的位置)4.width,height（图例组件的大小）;itemWidth,itemHeight(图例图标的大小)5. align（图例标记和文本的对齐）5. padding（图例内边距），itemGap（图例每项之间的间隔）6.icon(图例项的 icon)7.textStyle（图例的文本样式）7.1 rich（自定义富文本
echarts的legend(图例)中图例文本过长换行
qq_32538087的博客
10-25 8052
图例文本过长，空间太小放不下，想换行。 做之前我看了很多关于这个问题的解决方法，但是个人觉得不是很完美，因为有些需要给data中加\n等等，但是如果data是传过来的呢？这就不行了。 简单的逻辑写在注释里了 legend: { orient: 'vertical', right: 0, top: 30, itemWidth...
eCharts legend
08-31
eCharts的legend是用来展示不同系列数据的标识符号，如颜色、线型等的组件。用户可以通过点击legend中的项来显示或隐藏相应的系列数据。eCharts提供了丰富的配置选项，可根据需求自定义legend的样式、位置和布局方式...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值