echarts横向柱状图简单实现方法
作者：sukie04120
这篇文章主要给大家介绍了关于echarts横向柱状图简单实现的相关资料,ECharts是百度前端开发部开发的一个开源可视化库,它可以帮助开发者轻松的实现各种数据可视化,文中通过代码介绍的非常详细,需要的朋友可以参考下
最近项目涉及好几种echarts的图表，特此记录一下
涉及点：
横向柱状图、不显示x轴标签、柱子渐变色、数量及单位显示在柱子内部。
效果图：
echarts配置：
option我是放置在data内部，然后再动态获取y轴和数值(series)的数据再进行图表的渲染
option: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: 0,
top: '8%',
right: '3%',
bottom: '8%',
containLabel: true
},
xAxis: {
type: 'value',
axisLabel: {
show: false // 不显示x轴标签
},
axisLine: {
// x轴线的颜色以及宽度
show: true,
lineStyle: {color: 'rgba(255,255,255,0.1)'}
},
axisTick: {
show: false // x轴刻度线
},
splitLine: { // x轴网格线
show: true,
lineStyle: {color: 'rgba(255,255,255,0.1)'}
}
},
yAxis: {
type: 'category',
axisTick: { show: false }, // y轴刻度线
axisLabel: { color: '#fff' }, // y轴文字的配置
axisLine: {
//x轴线的颜色
show: true,
lineStyle: {color: 'rgba(255,255,255,0.1)'}
},
data: ['内科','外科','妇科','儿科','牙科']
},
series: [
{
name: '人数',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'inside', //显示在柱子内部
textStyle: { color: '#fff' },
formatter: '{c}人' //单位
}
},
itemStyle: {
color: {
colorStops:[ //柱子的渐变色
{
offset: 0,
color: 'rgba(5, 80, 57, 1)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(13, 253, 178, 1)' // 100% 处的颜色
}
],
global: false
}
},
barWidth: 20, //柱子的宽度
data: [88,75,53,39,36]
}
]
}渲染图表方法及HTML：
//html：
<div class="echartDiv" ref="chart"></div>
//方法（渲染图表）：
initEcharts() {
this.myChart && this.myChart.dispose();
let chartDom = this.$refs.chart;
this.myChart = echarts.init(chartDom);
this.myChart.setOption(this.option);
let that = this;
window.addEventListener('resize', function() {
that.myChart.resize();
});
},附：echarts横向柱状图的两种简便画法
示例图
第一种方法： 可以随意控制y左轴和y右轴的显示位置
let option = {
// 柱状图的位置
grid: {
left: '0%',
right: '0%',
bottom: '0%',
top: '0',
containLabel: false // 图表两侧是否留白
},
dataZoom: [
{
type: 'inside'
}
],
xAxis: {
show: false,
type: 'value'
},
yAxis: [
// 左轴
{
type: 'category',
inverse: true,
axisLabel: {
inside: true,
zlevel: 2,
color: '#fff'
},
axisTick: {
show: false
},
axisLine: {
show: false
},
data: props.dataX
},
// 右轴
{
type: 'category',
inverse: true,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
inside: true,
formatter: '{value}s',
color: 'black'
},
data: props.dataY,
},
],
series: [
{
zlevel: -1, // 层级
type: 'bar',
barWidth: 30, // 内柱条的宽度
// animationDuration: 1500, // 内柱条的动画显示时间
showBackground: true,
// 内柱条样式
itemStyle: {
color: '#2596FF',
},
// ------------------数据及其样式----------------------------
// 内柱条的数据
data: props.dataY,
align: 'center'
},
],
}
第二种：y右轴的显示文字不能随意控制位置，此种写法是文字显示只能跟在内柱条的后面
let option = {
// 柱状图的位置
grid: {
left: '0%',
right: '0%',
bottom: '0%',
top: '0',
containLabel: false // 图表两侧是否留白
},
dataZoom: [
{
type: 'inside'
}
],
xAxis: {
show: false,
type: 'value'
},
yAxis: {
type: "category",
triggerEvent: true,
data: props.dataX,
axisLine: { show: false }, //不显示坐标轴
axisTick: { show: false }, //不显示坐标轴刻度线
axisLabel: {
inside: true, // 坐标显示在轴内侧
zlevel: 1,
color: '#ccc',
},
splitLine: {
show: false,
},
},
dataZoom: [
{
type: 'inside'
}
],
series: [
{
name: '',
zlevel: -1,
type: "bar",
color: '#2596FF',
barWidth: 30,
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
label: {
show: true,
position: "right",
color: "red",
fontSize: "12px",
formatter: '{c}s',
},
data: props.dataY,
},
],
}总结
到此这篇关于echarts横向柱状图简单实现的文章就介绍到这了,更多相关echarts横向柱状图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！