极客观点
项目管理
HarmonyOS
比如在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" 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>
`
我在项目中的处理
样式通过class或直接style都行
修改样式使用它提供的
api即可，样式api它基本上都提供，只想在最后带上单位月可以参考上述处理，，index === 数组长度 ? '月' : ''做法二：
单位在
xAxis上，使用nameTextStyle添加样式