echart怎么修改formatter的样式

image.png
比如在return value +<span>${a}</span>怎么改a的样式
image.png
`<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>line</title>
<script src="https://cdn.bootCSS.com/echarts/3.5.4/echarts.js"></script>

</head>
<body>

<!-- step 2:准备一个div的dom元素,用于渲染Echarts图表 -->
<div id="main" style="width: 600px;height: 400px;"></div>
<script type="text/javascript">
    // 图表实例化
    // step 3:初始化Echarts图表
    var mychart = echarts.init(document.getElementById("main"));
    // 图表使用
    // step 4:指定图表的配置项和数据
    var option  = {
        backgroundColor: 'rgb(8,14,16)',//背景颜色
      
      //提示框
    tooltip : {
       formatter: function (params) {
         // do some thing
         return  +params.name+ '名称'
      }
    },            
    xAxis: {
        type: 'category',//数据类型为不连续数据
        boundaryGap: false,//坐标轴两边是否留白
        axisLine: { //坐标轴轴线相关设置。数学上的x轴
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, 1)' //x轴颜色
          },
          },
          axisLabel: { //坐标轴刻度标签的相关设置
            textStyle: {
              color: '#FFFFFF',
            },
        
            
            
            formatter: function( value,index ) {
                var a="";
                var arr=['1', '2', '3', '4', '5', '6', '7月']
                if(value==arr.length){
                    a="月"
                }
                // return value+a
                var relVal = `<div class="chart-circle" >${a}</div>`;
                return relVal
                
                

            },
            
          },
          axisTick: { show: false,},//刻度点数轴
        data: ['1', '2', '3', '4', '5', '6', '7']
    },
    yAxis: {
        axisTick: { show: false,},//刻度点数轴
        type: 'value',
        splitLine: {//y轴上的y轴线条相关设置
        show: false,
        lineStyle: {
          color: 'white'
        }
        },                
        axisLine: {//y轴的相关设置
          show: false,
          lineStyle: {
          color: '#233e64' //y轴颜色
        },
        },
        axisLabel: {//y轴的标签相关设置
            textStyle: {
                color: '#FFFFFF',
            },
        },
    },
    series: [{
    name:'样例3',
    smooth: true,//设置拐点
    type:'line',
    symbol: 'circle',
    symbolSize :8,//圆心的大小
    itemStyle: {
    // color: "black",
    normal: {  
         color: "rgba(51, 255, 255, 1)",//小圆点的颜色
      lineStyle: {        // 系列级个性化折线样式 
        width: 2,
        type: 'solid', 
        // color: 'rgba(51, 255, 255, 1)' ,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ 
        offset: 0, 
        color: 'rgba(51, 255, 255, 1)' ,
        }, { 
            offset: 1, 
            color: 'rgba(78, 178, 255, 1)' 
            }]),//线条渐变色 
        }     
    }, 
    },//线条样式
    areaStyle:{
    normal:{
     //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
         offset: 0, color: 'rgba(61,234,255,0.6)'
     },{
         offset: 1, color: 'rgba(61,234,255,0)'
     }])
     }
    },//区域颜色渐变            
    data:[30, 25, 28, 24, 40, 30, 42,22]
    }]

};

// step 5:设置图表配置项。使用刚指定的配置项和数据显示图表
    mychart.setOption(option);
</script>

</body>
</html>
`

阅读 141
评论
    2 个回答

    我在项目中的处理

    const relVal = ''
    
    for (let i = 0; i < params.length; i++) {
      relVal += `<div class="chart-circle" ><span style="background: ${params[i].color}"></span>${params[i].seriesName}: ${params[i].value} ${unit}</div>`;
    }
    
    return relVal;

    样式通过class或直接style都行

    axisLabel: {
        color: '#f00',
        fontSize: 16,
        formatter: function (value, index) {
            return `${value} ${index === 6 ? '月 : ''}`
        },
    },

    修改样式使用它提供的api即可,样式api它基本上都提供,只想在最后带上单位 可以参考上述处理,,index === 数组长度 ? '月' : ''

    做法二:

     xAxis: {
        name: '月',
        nameTextStyle: {
            fontSize: 18
        },
    },

    单位在xAxis上,使用nameTextStyle添加样式

      用了name属性位置下不来很尴尬
      image.png
      image.png
      然后用了fotmater的形式又不可以识别htm标签
      image.png
      我想改这个月份的颜色 然后放置html标签就会显示出来
      image.png
      image.png

        撰写回答

        登录后参与交流、获取后续更新提醒