echarts x 起始_echarts-X轴不从0刻度开始

2024-05-19 00:15:50

1、问题背景

统一一周内植树的数量，利用柱状图来实现

2、实现源码

(1)X轴从零刻度开始

echarts-X轴不从0刻度开始

body,html{

width: 99%;

height: 99%;

font-family: "微软雅黑";

font-size: 12px;

}

#bar{

width: 100%;

height: 100%;

}

$(function(){

var chart = document.getElementById('bar');

var echart = echarts.init(chart);

var option = {

title: {

text: ''

},

tooltip: {

trigger: 'axis'

},

legend: {

data:['植树数量']

},

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

},

toolbox: {

feature: {

saveAsImage: {}

}

},

xAxis: {

type: 'category',

boundaryGap: false,

data: ['周一','周二','周三','周四','周五','周六','周日']

},

yAxis: {

type: 'value'

},

series: [

{

name:'植树数量',

type:'bar',

stack: '植树数量',

data:[34, 12, 56, 27, 42, 87, 62]

}

]

};

echart.setOption(option);

});

(2)X轴不从零刻度开始

echarts-X轴不从0刻度开始

body,html{

width: 99%;

height: 99%;

font-family: "微软雅黑";

font-size: 12px;

}

#bar{

width: 100%;

height: 100%;

}

$(function(){

var chart = document.getElementById('bar');

var echart = echarts.init(chart);

var option = {

title: {

text: ''

},

tooltip: {

trigger: 'axis'

},

legend: {

data:['植树数量']

},

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

},

toolbox: {

feature: {

saveAsImage: {}

}

},

xAxis: {

type: 'category',

boundaryGap: true,

data: ['周一','周二','周三','周四','周五','周六','周日']

},

yAxis: {

type: 'value'

},

series: [

{

name:'植树数量',

type:'bar',

stack: '植树数量',

data:[34, 12, 56, 27, 42, 87, 62]

}

]

};

echart.setOption(option);

});

3、实现结果

(1)X轴从零刻度开始

(2)X轴不从零刻度开始

4、问题说明

在xAxis中的boundaryGap属性，设置为false代表是零刻度开始，设置为true代表离零刻度间隔一段距离

echarts x 起始_echarts-X轴不从0刻度开始相关推荐

echarts x 起始_echarts实现获取datazoom的起始值(包括x轴和y轴)
我就废话不多说了,大家还是直接看代码吧~ let option = {} //你的echarts图表的配置,这里我就不贴我的了 myChart.setOption(option); //开始 let ...
echarts x 起始_echarts中如何在dataZoom 最左侧和最右侧始终显示起始和结束的值
let option = {} //你的echarts图表的配置,这里我就不贴我的了 myChart.setOption(option); //开始 let startValue = myChart. ...
echarts-X轴不从0刻度开始代码实现
boundaryGap: true, //xAxis中的boundaryGap属性,设置为false代表是零刻度开始,设置为true代表离零刻度间隔一段距离 xAxis: [{name: this.x ...
echarts横向滚动_ECharts滑动条型数据区域缩放组件（dataZoomSlider）
dataZoom[i]-slider 滑动条型数据区域缩放组件(dataZoomSlider) dataZoom[i]-slider.type | string [ default: 'sli ...
Vue：echarts的柱状图为什么X轴上的文字不显示？
Vue:echarts的柱状图为什么X轴上的文字不显示? 资源: echarts x轴文字显示不全(解决方案) echarts柱状图X轴底部文字有的不显示出来?
echarts 柱状图圆柱_Echarts 柱状图配置详解
1.基本柱状图 // 指定图表的配置项和数据 var option = { // ---- 标题 ----- title: { text: '主标题', textStyle: { color: 're ...
echarts或vcharts的X轴设置
vcharts vcharts就是基于vue对echarts进行封装后的图表组件,其配置有两个参数settting和extend,settings的参数格式参照vcharts的官方文档(https:/ ...
Echarts实现多个x轴或y轴曲线图
Echarts实现多个x轴或y轴曲线图效果图如下: 1.1 配置option对象 option:{// 设置 x 轴的样式xAxis:{},// 设置 y 轴的样式yAxis:[],// 设置每条曲 ...
echarts系列-带图教你调整左右位置x轴样式网格虚线刻度居中双轴Y轴滚动上下移动文字旋转改分割线颜色部分字体改色折注混合，X轴的颜色，X轴字体颜色，调整柱子颜色，调整小图标图例的大小和位置,鼠标
本文已参与「新人创作礼」活动,一起开启掘金创作之路. 宝子们,今天又是开心的一天呢~ 上面先说注意事项 1.如果使用show hidden控制图表显示隐藏,某些切换效果很奇怪,比如饼图,会从左上角开始 ...

最新文章

热门文章