关于echarts中使用到的图例、颜色设置、设置tooltip换行显示等问题

已于 2024-07-05 11:07:01 修改
阅读量388 收藏
点赞数 3
文章标签： echarts 前端 vue
于 2024-07-05 11:03:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/b0303/article/details/140202499
版权

最近使用echarts中用到图例随机生成，颜色多不好设置的问题，图例多展示出现不全，不能根据颜色判断图例和数据的问题等总结一下

原始代码：

that_ge.charts = echarts.init(document.getElementById('paramenterEcharts'));
      that_ge.alarmTypeLine = ['风速1','风速2','风速3','风速4','风速5','风速6','风速7','风速8','风速9','风速10','风速11','风速12','风速13','风速14','风速15',]
      that_ge.charts.setOption({
        color: that_ge.randerColor(),
        tooltip: {
          trigger: 'axis',
          show:true, //这些是防止过多看不到，根据自己的需要进行注释就行。
          showDelay:0,//这些是防止过多看不到，根据自己的需要进行注释就行。
          hideDelay:50,//这些是防止过多看不到，根据自己的需要进行注释就行。
          padding:10,//这些是防止过多看不到，根据自己的需要进行注释就行。
          confine:true,//这些是防止过多看不到，根据自己的需要进行注释就行。
          formatter:e=>{ // 遍历出图标和颜色、数值
            var tip = "";
            if(e !== null && e.length > 0){
              tip += e[0].name + '<br/>';
              for(let i=0;i<e.length;i++){
                if(i % 3  === 0){
                  tip += e[i].marker + e[i].seriesName + ": " + e[i].value + "<br/>";
                }else{
                  tip += e[i].marker + e[i].seriesName + ": " + e[i].value + "&nbsp;&nbsp;";
                }
              }
              return tip;
            }
          }
        },
        grid: {
          left: '4%',
          top:'2%',
        },
        legend: {
          left: 'right', // 水平位置，可选值：'left', 'center', 'right'
          type: 'scroll', // 使用滚动分页的图例
          right: 100,           
          top: 30,        
          bottom: 20,  
          orient: 'vertical', // 可选值：'horizontal' 或 'vertical'    
          // data:legendData,              
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              alignWithLabel: true
            },
            // data: val.data.xtimes,
            data: [1,2,3,4,5,6,7,8,9],
            axisLabel:{
              color:"#22b8ff",
            },
          },
        ],
        dataZoom: [//X轴鼠标滑动
          {show: true,realtime: true,start: 0,end: 100},
          {type: 'inside',realtime: true,start: 0,end: 100}
        ],
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '风速1',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速2',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速3',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速4',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速5',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速6',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速7',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速8',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速9',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速10',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速11',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速12',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速13',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速14',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速15',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速16',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速17',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速18',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速19',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速20',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速21',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速22',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速23',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速24',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速25',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速26',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速27',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速28',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速29',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速30',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速31',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速32',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速33',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速34',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速35',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速36',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速37',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速38',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速39',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
          {
            name: '风速40',
            type: 'line',
            data: [4,5,6,8,9,4,12,3,12],
            smooth: true,
          },
        ]
      })

这个是在随机生成颜色中要使用的图例内容一定要写上。

这个声明在data(){

        return{

                alarmTypeLine:'',//echarts图标名称

        }

}

随机生成的颜色代码：


randerColor(){ //echarts图颜色
          let arr = [];
      this.alarmTypeLine.forEach(item=>{
        this.random(arr)
      })
      return arr;
    },
    random(arr){ //echarts图颜色
      let color = 'rgb(' + [
        Math.round(Math.random() * 256),
        Math.round(Math.random() * 256),
        Math.round(Math.random() * 256)
      ].join(',') + ')';
      if(!arr.some(i=>i==color)){
        arr.push(color)
      }else{
        this.random(arr)
      }
    },

前进的探索者
关注
ECharts 饼图实现自定义标签包含图标icon（圆形图标，矩形图标）
旭东怪的博客
10-22 4687
1 原始效果图 2 实现代码 <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.
常用Echarts图指示线文字换行设置
wwyxjjz的博客
09-08 6297
项目中Echarts数据和单位过长 会导致显示不全，如下图所示 想让它换行显示，怎么解决呢？其实很简单，一两个属性就搞定啦 以饼图为例 其他Echarts图形的换行显示都是换汤不换药，写法类似 修改前的效果: 想要的效果： 需要修改formatter属性(两个方法 选择其一即可) 注意：在tooltip中使用</br>生效 在series label里面 \n 生效 直......
echarts：legend 图例形状，图例文字颜色与图例一致及图例文字多种颜色的配置
qq_33235680的博客
03-23 5107
echarts：legend 图例形状，图例文字颜色与图例一致及图例文字多种颜色的配置
笔记：Echarts 饼图 图例legend 自定义 换行
最新发布
sky8880的博客
08-28 687
【代码】笔记：Echarts 饼图 图例legend 自定义 换行。
echarts 自定义tooltip显示图例颜色
阑珊伊人
11-23 7653
echarts默认的tooltip是自带图例颜色的，如下图： 可是很多时候，功能需求会要求提示框带单位或者调整样式。这个时候我们就需要用tooltip的formatter来自定义提示框内容。 点我跳转echarts tooltip自定义 可一旦用到formatter，图例颜色就会消失。如下图 如何设置呢？ 上代码： formatter(params) { let val0 = params[0]["value"]; let val1 = params[1]["v
echarts——legend图例颜色设置，legend数组形式展示——基础积累
yehaocheng520的博客
01-15 1万+
echarts——legend图例颜色设置，legend数组形式展示——基础积累
echart实现自定义图例文字颜色
m0_72929120的博客
12-27 1966
【代码】echart实现自定义图例文字颜色。
Echarts 图例手动换行
weixin_30270889的博客
06-10 186
最近工作遇到一个legend手动换行的问题 ，用搜索引擎搜了N条记录都没有答案 最后还是看文档解决了。 默认布局到达边缘会自动分行（列） 修改Legend.data 手动添加一个字符串 '' 就能实现手动换行 参考：http://echarts.baidu.com/doc/doc.html#Legend 转载于:https://www.cnblogs.com/ElvinLong/p/...
在echarts中图例legend和坐标系grid实现左右布局实例
09-16
### ECharts中图例Legend和坐标系Grid实现左右布局实例详解 #### 一、引言 在使用ECharts进行数据可视化的过程中，合理的布局对于图表的可读性和美观性至关重要。本文将详细介绍如何在ECharts中实现图例(`legend`)...
Echarts 环形图图例内容+数据+换行
weixin_42546098的博客
07-05 3480
话不多说先上效果图 由于legen.formatter return的数据并不支持</br>直接换行所以只能用/n进行换行。但是使用\n后的内容并不能很好的进行对齐，刚开始也是困扰了我很久，毕竟UI图已经定稿只能硬着头皮上了。 说一下我的方法: 1.使用formatter 先拿到想要的数据然后用\n进行换行 formatter: function (name) { var target; for (var j = 0; ...
echarts图表坐标轴文字换行显示
HuLuWa1997的博客
09-08 5167
var handleTimeOption = { color: ['#ED5565', '#FFCE54', '#5D9CEC'], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { textStyle: { color: '#FFFFFF' // 图例
echarts图例与与title重合问题，如何让图例换行
yijiupingfan0914的博客
06-05 1万+
1.让图例换行//让legend换行，不与title重合 var tit = ['','','','']; var title = tit.concat(json.title); //console.log(title); option = { title: { text: '车系保值率排行榜', //title居中显示 x:'center' ...
echarts 图例换行
weixin_43885687的博客
03-27 1万+
echarts 图例换行 以饼图为例 图例换行 在legend中，legend.data是显示图例的数组，如果没有则是用了默认的，官方文档有说明 let legendsData = ["银时", "银时5", "王二小", "猹", "ink", "i123nk", "321", "qqq", "oso", "V"]; //直接将数组放入legend中 图标换行 在所需换行的地方插入空的字符串...
echarts的图例换行并对齐
weixin_42255789的博客
05-30 1009
echarts图例换行并对齐
Echarts - 更改图表图例（legend）自定义颜色（并与数据段颜色对应）
热门推荐
王佳斌
04-25 2万+
前言 示例来自 Echarts 官网：https://echarts.apache.org/examples/zh/editor.html?c=line-stack 如下图所示，这是默认图例的颜色，我们接下来进行更改。 实现代码 主要是 color 调色盘的配置，具体可看文档。 option = { title: { text: '' }, tooltip: { trigger: 'axis' }, // 更
改变echarts图表的颜色
weixin_57889610的博客
12-01 3917
在series下的itemStyle下的color设置colorStops 这里设置了四个区间。设置鼠标滑入变颜色 同样在series下的itemStyle下的color设置。2、 在series下的itemStyle下的normal设置颜色。1、直接在option下设置颜色。3、在data内设置饼图颜色。
echarts饼图图例换行
m0_48353529的博客
03-19 1074
【代码】echarts饼图图例换行。
Echarts—自定义图例布局样式和图例换行的实现
qq_38655624的博客
04-13 303
Echarts—自定义图例布局样式和图例换行的实现。
echarts显示tooltip内容换行
09-04
要在 ECharts 中实现 tooltip 内容换行，你可以使用 formatter 函数来自定义 tooltip 的显示内容。在 formatter 函数中，可以通过添加换行符（\n）来实现内容的换行。 以下是一个示例： ```javascript option = { // 其他配置项... tooltip: { trigger: 'axis', formatter: function(params) { var tooltipText = params[0].name + '<br/>'; for (var i = 0; i < params.length; i++) { var seriesName = params[i].seriesName; var value = params[i].value; tooltipText += seriesName + ': ' + value + '<br/>'; } return tooltipText; } }, // 其他配置项... }; ``` 在上述示例中，formatter 函数会遍历每个数据项，并将其名称和数值添加到 tooltipText 变量中。通过添加 `<br/>` 标签，可以在每个数据项之间创建换行。 你可以根据实际情况进行修改，使得 tooltip 的内容符合你的需求。记得在配置完 option 对象后，将其应用到 ECharts 图表中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值