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>

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

Vue echarts 修改 X轴、Y轴样式以及文字样式相关推荐

vue echarts 折线图多Y轴显示，加动态配置Y轴颜色
1.效果图 2.引入依赖 npm install echarts --save 3.在mian.js中引入 import * as echarts from 'echarts'; Vue.protot ...
自定义滚动条修改x和y轴滚动条交叉地方的css样式
自定义滚动条修改x和y轴滚动条交叉地方的css样式 ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处修改background背景色
修改echarts的x轴y轴的刻度和刻度线文本颜色和xy轴的轴线颜色和标题title的字体颜色
1,x轴y轴都是一样的: 1.1修改刻度文本颜色: 找到xAxis和yAxis: 添加如下代码:(和data和type同级并列) axisLabel: {show: true,textStyle: { ...
echarts 折线图设置y轴最小刻度_Vue 项目如何使用Echarts ，手摸手带你入门
前言最近可视化浪潮越发凶猛但是有些小伙伴们就慌了,觉得自己不是很懂,或者说对里面的参数不是很清楚,所以也就印象也就很模糊那么今天严老湿就带大家好好梳理梳理思路,顺便也带大家写几个Demo 首先得 ...
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
先详细看一下xAxis和yAxis配置的图表效果下图详细的标注了图表中x轴y轴可见的内容说明一下: x轴y轴在echarts配置项里,从内容上来说大体上没有太大区别,x轴能用的配置项y轴基本也可以 ...
Echarts去除x轴,y轴网格线,网格区域(背景)
每次写到Echarts时,总会忘记去除x轴,y轴网格线,网格区域(背景)是怎么设置的了,在这里记录一下,有个印象 xAxis : [{type : 'value',splitNumber: 2,sca ...
echarts的多个y轴
yAxis: [{type: 'value',name: '湿度(%)',axisLine: {show: true,lineStyle: {color: 'blue',},},axisLabel: ...
echarts柱状图x，y轴对应多条数据(可自定义)
echarts,x,y轴对应多条数据,y轴取反就行先说需求,我做这个图表是多个物流商对应不同月份的数值配置项option option = {tooltip: {trigger: 'axis',a ...
Echarts实现折线图Y轴不等距百分比（最终解决方案）
Echarts实现折线图Y轴不等距百分比(最终解决方案-上集) 出现背景解决思路总结附加出现背景最近公司有一个需求,主要是想展示近7日产品的一个良品率(百分率制).但是呢,基本上每天这个 ...

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

Vue echarts 修改 X轴、Y轴样式以及文字样式相关推荐

最新文章

热门文章

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

Vue echarts 修改 X轴、Y轴 样式以及文字样式相关推荐

最新文章

热门文章

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

Vue echarts 修改 X轴、Y轴样式以及文字样式相关推荐