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

淡淡的烟草味﹌ 2022-11-12 14:52 1208阅读 0赞

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

*  x轴 ------xAxis
 *  y轴 ------yAxis
 *  数据 -----series

**先来样式对比图吧 这样直观点**

**全局的**

> color: “\#ff7844”, //线条的颜色

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcHhoaW5n_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]  
**关于X轴**

> x轴坐标刻度样式（显示或者隐藏）：axisTick: \{ show: false \},

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcHhoaW5n_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]

> x轴坐标颜色 axisLine: \{ lineStyle: \{color: “\#000”\}\}

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcHhoaW5n_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]  
**关于Y轴**

> 是否展示y轴坐标竖线 ：axisLine: \{ show: false \} （X轴和Y轴原理）

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcHhoaW5n_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]

> 是否展示y轴坐标刻度：axisTick: \{ show: false \}

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcHhoaW5n_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 4]  
**关于交叉点**

> symbol: “circle” //修改交叉点样式 （实心/空心）

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcHhoaW5n_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 5]

> symbolSize: 6 //修改交叉点大小

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcHhoaW5n_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 6]

> smooth: true, //是否打开平滑的曲线

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcHhoaW5n_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 7]

> 样式代码位置

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

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

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcHhoaW5n_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20221022/5a7d90cffe1f4082b3f5d9d4235fca9f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcHhoaW5n_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: /images/20221022/624c0fd7053642e1b1f5d96865218190.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcHhoaW5n_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]: /images/20221022/f222c5b9c30b437996a5a3ce98736fbe.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcHhoaW5n_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]: /images/20221022/d1616d31f2354b099b4f8b9d8969a9f2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcHhoaW5n_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 4]: /images/20221022/0a1b9c3ac9ec4d42b0dd633d0e05fd72.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcHhoaW5n_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 5]: /images/20221022/0f735e6eae4a4cf5b1f4682784cfa324.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcHhoaW5n_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 6]: /images/20221022/e14230d4f18d456c80b1222a6ab57510.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcHhoaW5n_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 7]: /images/20221022/9be6cc378d7045bea0a7089543e0201a.png