所有的图表配置基本上大同小异,下面就列举一下有关柱状图的配置项:
废话不多说,请看代码:
子组件:水平柱状图(也就是图一)
<template>
<div class="histogram" :style="{ 'width': histogramLevelData.width }">
<div class="histogramBar" :id="id" :style="{'width':'100%','height': histogramLevelData.histogramBarHeight}"></div>
</div>
</template>
<script>
let _c = { id: 1 };
let echarts = require("echarts");
export default {
props: {
histogramLevelData: {
type: Object,
},
},
data() {
return {
myHisLevelChart: "",
};
},
created() {
_c.id++;
this.id = "c_histogramlevel_" + _c.id;
},
mounted() {
// 初始化echarts
this.$nextTick(()=>{
this.initChart();
})
// 监听浏览器变化初始化echarts
window.addEventListener('resize',this.initChart,false);
},
beforeDestroy () {
window.removeEventListener('resize', this.initChart)
},
methods: {
initChart() {
let _this=this
var chartDom = document.getElementById(this.id);
if (
this.myHisLevelChart != null &&
this.myHisLevelChart != "" &&
this.myHisLevelChart != undefined
) {
this.myHisLevelChart.dispose(); //销毁
}
this.myHisLevelChart = echarts.init(chartDom);
// 监听页面变化图表自适应
this.myHisLevelChart.resize()
var option = {
tooltip:{
trigger: "axis",
axisPointer: {
type: "shadow",//鼠标悬停显示样式
shadowStyle:{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 2
}
},
},
legend:this.histogramLevelData.legend,//标记属性
grid: this.histogramLevelData.grid,//绘图区调整
yAxis:this.histogramLevelData.yAxis,//y轴显示数值,以及范围
xAxis: {//X轴显示类型
type: this.histogramLevelData.xAxis.type,
data: this.histogramLevelData.xAxis.dataList,
axisLabel: {//坐标轴文字显示样式
interval: 0,
lineHeight:this.histogramLevelData.xAxis.axisLabel.lineHeight,
rotate:this.histogramLevelData.xAxis.axisLabel.rotate,
formatter:function(value){
var str = "";
var num = _this.histogramLevelData.xAxis.axisLabel.fontNum; //每行显示字数
var valLength = value.length; //该项Y轴字数
var rowNum = Math.ceil(valLength / num); // 行数
if(rowNum > 1) {
for(var i = 0; i < rowNum; i++) {
var temp = "";
var start = i * num;
var end = start + num;
temp = value.substring(start, end) + "\n";
str += temp;
}
return str;
} else {
return value;
}
}
}
},
series: this.histogramLevelData.series
};
this.myHisLevelChart.setOption(option);
},
},
};
</script>
<style lang="scss" scoped>
.histogram {
width: 100%;
}
</style>
垂直柱状图(如图二所示)
<template>
<div class="histogram" :style="{ 'width': histogramData.width }">
<div class="histogramBar" :id="id" :style="{'width':'100%','height': histogramData.histogramBarHeight}"></div>
</div>
</template>
<script>
let _c = { id: 1 };
let echarts = require("echarts");
export default {
props: {
histogramData: {
type: Object,
},
},
data() {
return {
myHisChart: "",
};
},
created() {
_c.id++;
this.id = "c_histogram_" + _c.id;
},
mounted() {
// 初始化echarts
this.$nextTick(()=>{
this.initChart();
})
// 监听浏览器变化初始化echarts
window.addEventListener('resize',this.initChart,false);
},
beforeDestroy () {
window.removeEventListener('resize', this.initChart)
},
methods: {
initChart() {
let _this=this
var chartDom = document.getElementById(this.id);
if (
this.myHisChart != null &&
this.myHisChart != "" &&
this.myHisChart != undefined
) {
this.myHisChart.dispose(); //销毁
}
this.myHisChart = echarts.init(chartDom);
// 监听页面变化图表自适应
this.myHisChart.resize()
var option = {
tooltip:{
trigger: "axis",
axisPointer: {
type: "shadow",//鼠标悬停显示样式
shadowStyle:{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 2
}
},
},
legend:this.histogramData.legend,//标记属性
grid: this.histogramData.grid,//绘图区调整
xAxis:this.histogramData.xAxis,//x轴显示数值,以及范围
yAxis: {//Y轴显示类型
type: this.histogramData.yAxis.type,
data: this.histogramData.yAxis.dataList,
axisLabel: {//坐标轴文字显示样式
interval: 0,
lineHeight:this.histogramData.yAxis.axisLabel.lineHeight,
rotate:this.histogramData.yAxis.axisLabel.rotate,
formatter:function(value){
var str = "";
var num = _this.histogramData.yAxis.axisLabel.fontNum; //每行显示字数
var valLength = value.length; //该项Y轴字数
var rowNum = Math.ceil(valLength / num); // 行数
if(rowNum > 1) {
for(var i = 0; i < rowNum; i++) {
var temp = "";
var start = i * num;
var end = start + num;
temp = value.substring(start, end) + "\n";
str += temp;
}
return str;
} else {
return value;
}
}
}
},
series: this.histogramData.series
};
this.myHisChart.setOption(option);
},
},
};
</script>
<style lang="scss" scoped>
.histogram {
width: 100%;
.companyList-header {
display: flex;
justify-content: flex-start;
align-items: center;
height: 22px;
line-height: 22px;
.slide-line {
display: inline-block;
width: 4px;
height: 16px;
background: #1d96ff;
border-radius: 2px;
margin: 0;
margin-right: 16px;
}
.companyList-header--one {
font-weight: 600;
font-size: 14px;
color: #333;
}
}
}
</style>
父组件
<template>
<div class="indicators">
<!-- 垂直柱状图 -->
<div class="histogram-box">
<HistoGramClum class="histogram" :histogramData="histogramData" />
</div>
<!-- 水平柱状图 -->
<div class="histogram-box-level">
<HistoGramLevel
class="histogram"
:histogramLevelData="histogramLevelData"
/>
</div>
</div>
</template>
<script>
import HistoGramClum from "@/components/histogramclum.vue";
import HistoGramLevel from "@/components/histogramlevel.vue";
export default {
name: "indicators",
components: {
HistoGramClum,
HistoGramLevel,
},
data() {
return {
// 垂直柱状图
histogramData: {
width: 100 + "%", //柱状图盒子宽度
histogramBarHeight: "34.282vw",
legend: {
//标记属性
data: ["未批复", "批复"],
orient: "vertical", //标记排列显示
top: -1, //标记位置
right: 1 + "%", //标记位置
icon: "roundRect",
itemWidth: 8,
itemHeight: 8,
},
grid: {
//绘图区调整
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
//X轴显示数值
type: "value",
boundaryGap: [0, 0.01], //数值精度
splitNumber: 1,
min: 0,
max: 20,
interval: 5,
axisLabel: {},
},
yAxis: {
//Y轴显示分类
type: "category",
dataList: [
"建筑工程施工许可证",
"建设工程规划许可证",
"政府投资项目初步设计批复",
"建设工程设计方案确认书",
"建设用地规划许可证",
"企业投资项目备案表/政府投资项目可行性研究报告批复",
],
axisLabel: {
//坐标轴文字显示样式
lineHeight: 18, //字体行高
fontNum: 14, //每行显示字数
rotate: 0, //文字旋转角度,0不旋转
},
},
series: [
//柱状图数据
{
name: "未批复",
type: "bar",
data: [1, 0, 2, 7, 16, 10],
itemStyle: {
color: "#FF9314", //柱状图颜色
},
label: {
show: true,
position: "right", //数值在右边显示
},
labelLine: { show: false }, //是否显示线条
},
{
name: "批复",
type: "bar",
data: [2, 2, 9, 12, 15, 14],
itemStyle: {
color: "#1492FF",
},
label: {
show: true,
position: "right", //数值在右边显示
},
labelLine: { show: false }, //是否显示线条
},
],
},
// 水平柱状图
histogramLevelData: {
width: 100 + "%", //柱状图盒子宽度
histogramBarHeight: "37.005vw",
legend: {
//标记属性
data: ["月度上报完成率", "问题项目督查反馈率", "年度目标完成率"],
orient: "horizontal", //标记排列显示
top: 15, //标记位置
left: 3 + "%", //标记位置
icon: "roundRect",
itemWidth: 8,
itemHeight: 8,
},
grid: {
//绘图区调整
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
yAxis: {
//Y轴显示数值
type: "value",
boundaryGap: [0, 0.01], //数值精度
splitNumber: 1,
min: 0,
max: 100,
interval: 20,
axisLabel: {},
},
xAxis: {
//X轴显示分类
type: "category",
dataList: [
"北山街道",
"西溪街道",
"翠苑街道",
"古荡街道",
"留下街道",
"转塘街道",
"蒋村街道",
"灵隐街道",
"文新街道",
"三墩镇",
"双浦镇",
"艺创小镇",
"云栖小镇",
"紫荆港科技城",
"西溪谷"
],
axisLabel: {
//坐标轴文字显示样式
lineHeight: 18, //字体行高
fontNum: 18, //每行显示字数
rotate: 45, //文字旋转角度,0不旋转
},
},
series: [
//柱状图数据
{
name: "月度上报完成率",
type: "bar",
data: [23, 43, 70, 22, 41, 83, 42, 81, 8, 30, 29, 4,39,62,96],
itemStyle: {
color: "#1492FF", //柱状图颜色
},
label: {
show: false,
position: "top", //数值在右边显示
},
labelLine: { show: false }, //是否显示线条
},
{
name: "问题项目督查反馈率",
type: "bar",
data: [58, 23, 72, 18, 83, 79, 81, 89, 56, 100, 9, 37,43,40.5,73],
itemStyle: {
color: "#09C592",
},
label: {
show: false,
position: "top", //数值在右边显示
},
labelLine: { show: false }, //是否显示线条
},
{
name: "年度目标完成率",
type: "bar",
data: [100, 82, 42, 56, 82, 77, 76, 78, 14, 94, 10, 9,62,58,39],
itemStyle: {
color: "#FF9314",
},
label: {
show: false,
position: "top", //数值在右边显示
},
labelLine: { show: false }, //是否显示线条
},
],
},
};
},
mounted() {},
};
</script>
<style lang="scss" scoped>
.indicators {
width: 100%;
margin-top: 16px;
.pie-box {
width: 100%;
height: 300px;
padding-top: 15px;
background-color: #fff;
}
.histogram-box {
width: 100%;
height: 300px;
margin-top: 16px;
background-color: #fff;
padding-top: 15px;
padding-bottom: 20px;
}
.histogram-box-level {
width: 100%;
margin-top: 16px;
background-color: #fff;
height: 300px;
padding-top: 15px;
padding-bottom: 20px;
}
}
</style>
代码展示完毕,均可复制粘贴直接使用,相关调整,请手动调节