Vue echarts 修改 X轴、Y轴 样式以及文字样式

前言： 做数据统计图的时候 总结了一下修改样式的东西

• 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>

样式只是用到的极少一部分，更多可参考官方。
完工！