Key parameter configuration:
- Location of the histogram
- y axis disappears
- The x-axis lines and tick marks disappear but the text remains
- Area shading of the histogram
- A quantity mark at the top of the histogram indicates the configuration.
- The x-axis and y-axis are composed of lines, tick marks, and text.
- Each item of series data can be configured individually or as a whole.
- echarts official demo
- Official document for detailed configuration of echarts histogram
<template>
<div id="barchart_container"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
};
},
created() {
},
mounted() {
var bar = echarts.init(document.getElementById("barchart_container"));
var option = {
//柱状图位置
grid: {
// left: "3%",
// right: "4%",
bottom: 100,
// height: 200
show: false
// containLabel: true,
},
//图例部分
legend: {
left: 84,
bottom: 41,
data: ["自我评分", "师兄评分"],
textStyle: {
fontSize: 18,
fontFamily: "Source Han Sans CN",
fontWeight: "bold",
color: "#333333",
},
itemGap: 185,
itemWidth: 19,
itemHeight: 7,
inactiveColor: "#f60", //图例关闭时的颜色
},
//x轴配置
xAxis: {
//类型
type: "category",
//数据 data中的每一项的字体样式可以单独配置
data: ["html", "css", "javascript", "框架", "jquery"],
// 线条
axisLine: {
show: false,
},
//刻度
axisTick: {
show: false,
},
//文字配置
axisLabel: {
show: true,
margin: 12,
fontSize: 15,
fontFamily: "Source Han Sans CN",
fontWeight: 500,
color: "#333333",
},
},
//y轴配置
yAxis: [
{
show: false
},
],
//数据系列
series: [
{
name: "自我评分",
type: "bar",
data: [2.0, 3.0, 4.0, 5.0, 10.0],
//每一条柱状图的样式展示
itemStyle: {
color: "#FC9708",
background: "#FC9708",
shadowColor: "#FC9708",
//阴影
shadowOffsetX: 4,
shadowOffsetY: 5,
shadowBlur: 10,
borderRadius: "4 4 0 0",
// opacity: 0.6
},
//柱状图顶部的数量标注
markPoint: {
symbol: "pin",//相当于是type
symbolSize: "65",//size
symbolOffset: [0, -1],//位置偏移量
//是否显示标注的值
label: {
show: true,
fontFamily: "wgsFont",//该字体是我自己引入的lcd字体，不知道怎么引入，私聊。
fontSize: 44,
},
//哪些值显示标注，只有这三种数据显示，目前不能都做到显示，其实也可以做到都显示但是效果可能不好
data: [
{
type: "max", name: "最大值" },
{
type: "min", name: "最小值" },
{
type: "average", name: "平均值" },
],
},
//这是一个平均线
// markLine: {
// data: [{ type: "average", name: "平均值" }],
// },
},
{
name: "师兄评分",
type: "bar",
data: [3.0, 4.0, 6.0, 8.0, 11.0],
itemStyle: {
color: "#2E5AFB",
// color: "#FC9708",
background: "#2E5AFB",
shadowColor: "#2E5AFB",
shadowOffsetX: 4,
shadowOffsetY: 5,
shadowBlur: 10,
borderRadius: "4 4 0 0",
},
markPoint: {
symbol: "pin",
symbolSize: "65",
symbolOffset: [0, -1],
//是否标注的值
label: {
show: true,
fontFamily: "wgsFont",
fontSize: 44,
},
data: [
{
type: "max", name: "最大值" },
{
type: "min", name: "最小值" },
{
type: "average", name: "平均值" },
],
},
// markLine: {
// data: [{ type: "average", name: "平均值" }],
// },
},
],
};
bar.setOption(option);
},
methods: {
},
computed: {
},
};
</script>
<style scoped>
#barchart_container {
width: 560px;
height: 328px;
/* FIXME:ZUJIAN WEI ZHI */
margin: 20px 0 0 20px;
background: #ffffff;
box-shadow: 3px 8px 17px 1px rgba(46, 90, 251, 0.2);
border-radius: 10px;
}
</style>