以折线图为例。最终呈现的效果是这样的
在最外层可以设置,距离外层box的距离
myChart.setOption({
grid: {
//距离外层box左右位置
x: 30,//左
y: 45,//上
x2: 45,//右
y2: 40,//下
borderWidth: 1,
},
})
在xAxis,x坐标轴中,可以设置的样式,同样可作用于y轴。
修改x轴字体颜色
axisLabel: { //字体
show: true,
textStyle: {
color: "#0079B8",
fontSize: 12,
},
修改x轴坐标轴颜色
axisLine: {
//坐标轴颜色
lineStyle: {
color: "#0079B8",
},
},
yAxis样式
1.name是 顶部文字
2,刻度数值的最大最小,min到max
3,坐标轴y轴的颜色修改
4,网格样式修改,solid是实线
5.y轴第一个值0隐藏(这个我找了好久)
yAxis: {
type: "value",
name: "日期"
nameLocation: "end",//name的具体位置,可调整上中下左
// min: 0,
// max: 100,
axisLine: {
//线
lineStyle: {
color: "#0079B8",
width: 1,
},
},
splitLine: {
//网格区域
show: true,
lineStyle: {
color: "#70707033",
width: 1,
type: "dotted",
},
},
axisLabel: {
formatter: function (value, index) {//隐藏 0
let texts = [];
if (value == 0) {
texts.push("");
} else {
texts.push(value);
}
return texts;
},
show: true,
textStyle: {
color: "#0079B8", //更改坐标轴文字颜色
fontSize: 12, //更改坐标轴文字大小
},
},
},
series具体样式了
1、空心的折线图小圆点设置
2.渐变色设置
3.折线颜色修改
4.折线修改为曲线
{
data: [82, 93, 90, 93, 129, 133, 130, 92, 1, 94, 190],
type: "line",//折线修改为曲线
smooth: true,//显示
symbol: "circle",//折线节点为小圆点
symbolSize: "5", //折线点大小
itemStyle: {
borderColor: that.color, //折线点边框色,这里我函数调用了。大家直接换成自己要的颜色
color: "#002440",
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: that.color, // 0% 处的颜色
},
{
offset: 1,
color: "#ffffff00", // 100% 处的颜色
},
]), //背景渐变色
},
},
lineStyle: {
width: 1,
type: "solid",
color: that.color, //折线的颜色
},
},