echats 问题_echats地图获取区域机构编码-CSDN博客

本文链接：https://blog.csdn.net/qq_39917320/article/details/90513368
折线图：修改鼠标滑过悬浮框里面的内容过长进行换行处理
在tootip下面进行配置；
tooltip: {
                trigger: 'axis',   //主要在柱状图，折线图等会使用类目轴的图表中使用
                                   //还有一个属性item=》主要在散点图，饼图等无类目轴的图表中使用。
                formatter:function(val){
                    let newStr = "";
                    for(var list in val){
                        var str1 = val[list].seriesName;
                        if(str1.length <= 90){
                            newStr += str1 + '\n'
                        }else if(str1.length > 90 && str1.length <= 180){
                            newStr +=`${str1.slice(0,90)}\n${str1.slice(90,180)}\n${str1.slice(180)}\n`
                        }else if(str1.length > 180 && str1.length <= 270){
                            newStr += `${str1.slice(0,90)}\n${str1.slice(90,180)}\n${str1.slice(180,240)}\n${str1.slice(240)}\n`
                        }else if(str1.length > 360){
                            newStr += `${str1.slice(0,90)}\n${str1.slice(90,180)}\n${str1.slice(180,240)}\n${str1.slice(360)}\n`
                        }
                    }
                    return newStr;
                },
                extraCssText:'white-space:pre-wrap'   //上面写的换行\n不起作用，因为这个悬浮选样式默认是不换行，必须手动设置为换行，就能显示换行的效果了。
                // position:function(p){
                //     return [p[0] -0, p[1] - 0];    ==》改变鼠标在悬浮框中位置，感觉没啥用
                    
                // }
            },


2，还有一种换行的就是把\n换成</br>就行，这个没有试，应该也可以。





//饼图配置：
applyFlowTitle: computed('applyFlowTitle', function () {
    return "流量统计图"  //饼图标题
  }),
applySetOptions:computed('applyFlowTitle',function(){
   return {
     title: {
       text: applyFlowTitle,
        x: 'center',
        y:'10px'
     },
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
   }
}),


applyPieInfofirst.forEach(function (state, index) {
                if (index !== "") {
                  applyChartPie.push({
                    value: parseInt(state.value),
                    name: state.name
               });
               pieNameOne.push(state.name);   //饼图的小提示内容
            state.percent = (parseInt(state.value) / parseInt(total) * 100).toFixed(2);
                } else {
                  state.percent = '100';
                  total = state.value;
                }
          });
          if(Ember.applyPieOne){
            Ember.applyPieOne.setOption({
              series: [{
                data: applyChartPie            //饼图中的数据
              }],
              legend:{                        //小提示块样式设置
                x: 'center',
                y: "bottom",
                itemWidth: 10,
                itemHeight: 5,
                itemGap: 5,
                textStyle: {
                    fontWeight: "bolder"
                },
                data: pieNameOne              //饼图外面的小提示块
             }
            })
          }



//折线图
Ember.flowId.setOption({
            tooltip: {
              formatter: function (params) {
					 var res = params[0].name + '<br/>' + params[0].seriesName + '：' + params[0].value + yUnit + '<br/>' + params[1].seriesName + '：' + params[1].value + yUnit;
                return res;
              }
            },
            xAxis: {
              data: data1.msg[0].time_stamp.map(function (str) {
                return str.replace(' ', '\n')
              })
            },
            yAxis: {
              name: yUnit,
              type: 'value'
            },
            series: [{                              //折线图数据
              areaStyle:{normal:{}},                //折线图阴影显示
              data: byteArr                         //折线图1
            }, {
              areaStyle:{normal:{}},                //折线图阴影显示
              data: xmitArr                         //折现图2
            }
          ]
          });

比较好的文档对照：https://www.jianshu.com/p/df19eed76357


//饼图防止标签重叠
 series: [{
                                                                                                                     
    data：aaa,
                                                                                    
    avoidLabelOverlap: true,
  }]    


//
//title配置项
title:{
		show:"true",//是否显示标题，默认显示，可以不设置
		text:"echarts实例",//图表标题文本内容
		link:"http://echarts.baidu.com/",//点击标题内容要跳转的链接
		target:"blank",//跳转链接打开方式，blank是新窗口打开，self是自身窗口打开，跟a标签一样
textStyle:{//标题内容的样式
		color:'#e4393c',//京东红
	    fontStyle:'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
		fontWeight:"lighter",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
		fontFamily:"san-serif",//主题文字字体，默认微软雅黑
	    fontSize:18//主题文字字体大小，默认为18px
	    },
		textAlign:'left',//标题文本水平对齐方式，建议不要设置，就让他默认，想居中显示的话，建议往下看
		textBaseline:"top",//默认就好,垂直对齐方式,不要设置
		subtext:"//主标题的副标题文本内容，如果需要副标题就配置这一项
		sublink:"http://blog.csdn.net/zhaoxiang66",//点击副标题内容要跳转的链接
		subtarget:"blank",//同主标题，blank是新窗口打开，self是自身窗口打开
		subtextStyle:{//副标题内容的样式
		color:'green',//绿色
		fontStyle:'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
		fontWeight:"lighter",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
		fontFamily:"san-serif",//主题文字字体，默认微软雅黑
		fontSize:12//主题文字字体大小，默认为12px
		},
		padding:5,//各个方向的内边距，默认是5，可以自行设置
		itemGap:10,//主标题和副标题之间的距离，可自行设置
		left:"center",//left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right',如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
		top:"center",//left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right',如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
		right:"auto",//right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
		bottom:"auto",//bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
	    //left设置center标题会自动水平居中
		//top设置center标题会自动垂直居中
		backgroundColor:"#ccc",//标题背景色，默认透明，颜色可以使用 RGB 表示，比如 'rgb(128, 128, 128)' ，如果想要加上 alpha 通道，可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六进制格式，比如 '#ccc'
		borderColor:"red",//标题的边框颜色，颜色格式支持同backgroundColor
		borderWidth:2,//标题边框线宽，默认为0，可自行设置
		shadowBlur: 10,//图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
		shadowColor: "black",
		shadowOffsetX: 0,
		shadowOffsetY: 0,
		}

原文链接：https://blog.csdn.net/zhaoxiang66/article/details/73574620
具体再参考一下这位博友:https://blog.csdn.net/lwang_IT/article/details/82685116
饼图参考这位博友：https://blog.csdn.net/hyzhang6/article/details/80068015