前言: 做数据统计图的时候 总结了一下修改样式的东西
- x轴 ------xAxis
- y轴 ------yAxis
- 数据 -----series
先来样式对比图吧 这样直观点
全局的
color: “#ff7844”, //线条的颜色
关于X轴
x轴坐标刻度样式(显示或者隐藏):axisTick: { show: false },
x轴坐标颜色 axisLine: { lineStyle: {color: “#000”}}
关于Y轴
是否展示y轴坐标竖线 :axisLine: { show: false } (X轴和Y轴原理)
是否展示y轴坐标刻度:axisTick: { show: false }
关于交叉点
symbol: “circle” //修改交叉点样式 (实心/空心)
symbolSize: 6 //修改交叉点大小
smooth: true, //是否打开平滑的曲线
样式代码位置
<template>
<div id="main" style="width: 100%;height:300px;"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
props: {},
data() {
return {};
},
computed: {},
created() {},
mounted() {
this.fn();
},
watch: {},
methods: {
fn() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
// 绘制图表
myChart.setOption({
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
//修改X轴样式
axisLine: {
lineStyle: {
color: "#9a9b96",
},
},
//x轴坐标刻度
axisTick: { show: false },
},
yAxis: {
type: "value",
axisLine: { show: false }, //是否展示y轴坐标竖线
axisTick: { show: false }, //是否展示y轴坐标刻度
axisLabel: {
color: "#9a9b96",
},
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: "line",
symbol: "circle", //修改交叉点样式
symbolSize: 6, //修改交叉点大小
smooth: true, //是否打开平滑的曲线
},
],
color: "#ff7844", //线条的颜色
});
},
},
components: {},
};
</script>
样式只是用到的极少一部分,更多可参考官方。
完工!