Vue echarts 修改 X轴、Y轴样式以及文字样式-蒲公英云

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>