echarts中x轴 y轴配置(字体颜色，线的颜色，分割线，y周单位颜色)。vue中直接使用echarts以及vue中使用vue-echarts如何配置横向渐变与纵向渐变（后者适用于前者）

vue中直接使用echarts

//var myChart = this.$echarts.init(document.getElementById("echart-twoline")); //vue
var myChart = echarts.init(document.getElementById("echart-twoline"));//jquery
var option =  {backgroundColor: "#323a5e",tooltip: {trigger: "axis",axisPointer: {type: "shadow",},},legend: {data: ["计划劳务资源", "实际劳务资源"],//align: 'right',//文字与图形之间的前后顺序right: 10,textStyle: {color: "#fff",padding:[0,3]//文字与图形之间的左右间距},itemWidth: 14,//图例标记的图形宽度。itemHeight: 10,//图例标记的图形高度。itemGap: 13,//图例每项之间的间隔},grid: {left: "3%",right: "4%",bottom: "3%",containLabel: true,},xAxis: [{type: "category",data: ["1月", "2月", "3月", "4月"],axisLine: {//x轴线的颜色以及宽度show: true,lineStyle: {color: "rgba(219,225,255,1)",width: 0,type: "solid",},},axisTick: {show: false,},axisLabel: {//x轴文字的配置show: true,textStyle: {color: "rgba(219,225,255,1)",},},splitLine: {//分割线配置show: false,lineStyle: {color: "rgba(219,225,255,1)",},},},],yAxis: [{type: "value",name: "单位：人", //y轴上方的单位nameTextStyle: {//y轴上方单位的颜色color: "#fff",},axisLabel: {//y轴文字的配置textStyle: {color: "rgba(219,225,255,1)",margin: 15,},// formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号},axisTick: {show: false,},axisLine: {//y轴线的颜色以及宽度show: false,lineStyle: {color: "#fff",width: 1,type: "solid",},},splitLine: {//分割线配置show: false,lineStyle: {color: "rgba(219,225,255,1)",},},},],series: [{name: "计划劳务资源",type: "bar",data: [38, 38, 42, 48],barWidth: 10, //柱子宽度barGap: 0.5, //柱子之间间距itemStyle: {normal: {/**使用echats时的渐变颜色设置 */// color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{//     offset: 0,//     color: 'rgba(0, 153, 239, 0.8)'// }, {//     offset: 1,//     color: 'rgba(66, 187, 255, 1)'// }]),opacity: 1,/**使用vue-echats时的渐变颜色设置 */color: {type: "linear",// x=0,y=1,柱子的颜色在垂直方向渐变x: 0,y: 1,colorStops: [// 0%处的颜色{offset: 0,color: "#248ff7",},{offset: 1,color: "#6851f1",},],global: false, // 缺省为 false},},},},{name: "实际劳务资源",type: "bar",data: [40, 30, 42, 50],barWidth: 10,barGap: 0.5,itemStyle: {normal: {/**使用echats时的渐变颜色 */// color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{//     offset: 0,//     color: 'rgba(0, 242, 159, 1)'// }, {//     offset: 1,//     color: 'rgba(76, 240, 254, 1)'// }]),opacity: 1,color: {type: "linear",// x2=1,y=0,柱子的颜色在水平方向渐变x2: 1,y2: 0,colorStops: [{offset: 0,color: "#8bd46e",},{offset: 0.5,color: "#f5804d",},{offset: 1,color: "#09bcb7",},],global: false,},},},},],};myChart.setOption(option);window.addEventListener("resize", () => {myChart.resize();});

vue中使用vue-echarts组件

<template><el-card shadow="never" class="hostStat"><div slot="header" class="clearfix"><span class="title">主机资源统计总览</span></div><el-collapse-transition><v-chart class="host-chart" autoresize :options="options" /></el-card>
</template>
<script>
export default {components: {},data() {return {options: {}, };},created() {this.initChart();},methods: {initChart() {this.options = {backgroundColor: "#323a5e",tooltip: {trigger: "axis",axisPointer: {type: "shadow",},},legend: {data: ["计划劳务资源", "实际劳务资源"],//align: 'right',//文字与图形之间的前后顺序right: 10,textStyle: {color: "#fff",padding:[0,3]//文字与图形之间的左右间距},itemWidth: 14,//图例标记的图形宽度。itemHeight: 10,//图例标记的图形高度。itemGap: 13,//图例每项之间的间隔},grid: {left: "3%",right: "4%",bottom: "3%",containLabel: true,},xAxis: [{type: "category",data: ["1月", "2月", "3月", "4月"],axisLine: {//x轴线的颜色以及宽度show: true,lineStyle: {color: "rgba(219,225,255,1)",width: 0,type: "solid",},},axisTick: {show: false,},axisLabel: {//x轴文字的配置show: true,textStyle: {color: "rgba(219,225,255,1)",},},splitLine: {//分割线配置show: false,lineStyle: {color: "rgba(219,225,255,1)",},},},],yAxis: [{type: "value",name: "单位：人", //y轴上方的单位nameTextStyle: {//y轴上方单位的颜色color: "#fff",},axisLabel: {//y轴文字的配置textStyle: {color: "rgba(219,225,255,1)",margin: 15,},// formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号},axisTick: {show: false,},axisLine: {//y轴线的颜色以及宽度show: false,lineStyle: {color: "#fff",width: 1,type: "solid",},},splitLine: {//分割线配置show: false,lineStyle: {color: "rgba(219,225,255,1)",},},},],series: [{name: "计划劳务资源",type: "bar",data: [38, 38, 42, 48],barWidth: 10, //柱子宽度barGap: 0.5, //柱子之间间距itemStyle: {normal: {/**使用echats时的渐变颜色设置 */// color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{//     offset: 0,//     color: 'rgba(0, 153, 239, 0.8)'// }, {//     offset: 1,//     color: 'rgba(66, 187, 255, 1)'// }]),opacity: 1,/**使用vue-echats时的渐变颜色设置 */color: {type: "linear",// x=0,y=1,柱子的颜色在垂直方向渐变x: 0,y: 1,colorStops: [// 0%处的颜色{offset: 0,color: "#248ff7",},{offset: 1,color: "#6851f1",},],global: false, // 缺省为 false},},},},{name: "实际劳务资源",type: "bar",data: [40, 30, 42, 50],barWidth: 10,barGap: 0.5,itemStyle: {normal: {/**使用echats时的渐变颜色 */// color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{//     offset: 0,//     color: 'rgba(0, 242, 159, 1)'// }, {//     offset: 1,//     color: 'rgba(76, 240, 254, 1)'// }]),opacity: 1,color: {type: "linear",// x2=1,y=0,柱子的颜色在水平方向渐变x2: 1,y2: 0,colorStops: [{offset: 0,color: "#8bd46e",},{offset: 0.5,color: "#f5804d",},{offset: 1,color: "#09bcb7",},],global: false,},},},},],};},},
};
</script>
<style lang="scss">
.host-chart {width: 100%;height: 300px;margin-bottom: 15px;
}
</style>

echarts中x轴 y轴配置(字体颜色，线的颜色，分割线，y周单位颜色)。vue中直接使用echarts以及vue中使用vue-echarts如何配置横向渐变与纵向渐变（后者适用于前者）相关推荐

Echarts柱状纵向横向、圆角、渐变、x轴字体倾斜或垂直显示
1.柱状纵向变横向将xAxis的type设置为value, 将yAxis的type设置为category即可实现横向显示 //纵向xAxis: [{type: 'value'}],yAxis: [{ ...
echarts中y轴设置刻度_xAxis 配置
设置ECharts中y轴刻度线的样式在上节内容中我们提到了 ECharts 中 y 轴刻度线样式的设置,那么在本节我们就来详细介绍一下 yAxis 中 axisTick.lineStyle 所包含的 ...
Vue 中echarts的数据参数使用、X轴Y轴
Echarts 柱状图配置详解 - 龙恩0707 - 博客园 ECharts图表设置x轴和y轴显示数值_King汀的博客-CSDN博客_echarts设置y轴数值 echarts柱状图渐变色_kyl ...
echarts，x轴y轴，配置参数详情
mytextStyle={color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 fontW ...
echarts系列-带图教你调整左右位置x轴样式网格虚线刻度居中双轴Y轴滚动上下移动文字旋转改分割线颜色部分字体改色折注混合，X轴的颜色，X轴字体颜色，调整柱子颜色，调整小图标图例的大小和位置,鼠标
本文已参与「新人创作礼」活动,一起开启掘金创作之路. 宝子们,今天又是开心的一天呢~ 上面先说注意事项 1.如果使用show hidden控制图表显示隐藏,某些切换效果很奇怪,比如饼图,会从左上角开始 ...
echarts的xAxis和yAxis——x轴y轴以及网格线的详细配置
先详细看一下xAxis和yAxis配置的图表效果下图详细的标注了图表中x轴y轴可见的内容说明一下: x轴y轴在echarts配置项里,从内容上来说大体上没有太大区别,x轴能用的配置项y轴基本也可以 ...
echarts图表的x轴和y轴的配置
xAxis与yAxis中有很多配置项,下面我以xAxis进行详解,yAxis参考xAxis即可 nameTextStyle:坐标轴名称的文字样式 axisLine:坐标轴轴线相关设置. axisTic ...
Echarts多系多y轴的配置
有时候在一个图形中需要显示的对象多样化,一个y轴并不能满足我们的需求.这时我们就需要配置多个y轴 <!DOCTYPE html> <html> <head>< ...
vue echarts 折线图多Y轴显示，加动态配置Y轴颜色
1.效果图 2.引入依赖 npm install echarts --save 3.在mian.js中引入 import * as echarts from 'echarts'; Vue.protot ...

echarts中x轴 y轴配置(字体颜色，线的颜色，分割线，y周单位颜色)。vue中直接使用echarts以及vue中使用vue-echarts如何配置横向渐变与纵向渐变（后者适用于前者）

vue中直接使用echarts

vue中使用vue-echarts组件

echarts中x轴 y轴配置(字体颜色，线的颜色，分割线，y周单位颜色)。vue中直接使用echarts以及vue中使用vue-echarts如何配置横向渐变与纵向渐变（后者适用于前者）相关推荐

最新文章

热门文章