Vue echarts 修改 X轴、Y轴 样式以及文字样式 淡淡的烟草味﹌ 2022-11-12 14:52 1132阅读 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
还没有评论,来说两句吧...