echart怎么修改formatter的样式


比如在return value +<span>${a}</span>怎么改a的样式

`<!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"></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>
`

回答

我在项目中的处理

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

以上是 echart怎么修改formatter的样式 的全部内容， 来源链接： utcz.com/a/28384.html

回到顶部