mounted() {
var bar = echarts.init(document.getElementById("barchart_container"));
var option = {
// title: {
// text: "某地区蒸发量和降水量",
// subtext: "纯属虚构",
// },
tooltip: {
// trigger: "axis",
},
grid: {
left: "3%",
right: "4%",
bottom: 100,
// height: 200
show: false
// containLabel: true,
},
//图例部分
legend: {
left: "25%",
bottom: 41,
data: ["自我评分", "师兄评分"],
textStyle: {
fontSize: 18,
fontFamily: "Source Han Sans CN",
fontWeight: "bold",
color: "#333333",
},
itemGap: 185,
itemWidth: 19,
itemHeight: 7,
inactiveColor: "#f60", //图例关闭时的颜色
},
// toolbox: {
// show: true,
// feature: {
// dataView: { show: true, readOnly: false },
// magicType: { show: true, type: ["line", "bar"] },
// restore: { show: true },
// saveAsImage: { show: true },
// },
// },
calculable: true,
xAxis: {
// show: false,
type: "category",
data: ["html", "css", "javascript", "框架", "jquery"],
// data: [8, 5, 6, 9, 10],
// nameTextStyle: {
// fontSize: 16,
// fontFamily: "Source Han Sans CN",
// fontWeight: 500,
// color: "#333333",
// },
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
margin: 12,
fontSize: 15,
fontFamily: "Source Han Sans CN",
fontWeight: 500,
color: "#333333",
},
},
yAxis: [
{
show: false,
type: "value",
},
],
series: [
{
name: "自我评分",
type: "bar",
data: [2.0, 3.0, 4.0, 5.0, 10.0],
itemStyle: {
color: "#FC9708",
background: "#FC9708",
// shadowColor: "3px 8px 17px 1px rgba(252, 151, 8, 0.6)",
shadowColor: "#FC9708",
shadowOffsetX: 4,
shadowOffsetY: 5,
shadowBlur: 10,
borderRadius: "4 4 0 0",
// opacity: 0.6
},
// lineStyle: {
// color: "red"
// },
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: "平均值" }],
// },
},
{
name: "师兄评分",
// label: {
// show: true
// },
// labelLine: {
// show: true
// },
type: "bar",
data: [3.0, 4.0, 6.0, 8.0, 11.0],
itemStyle: {
color: "#2E5AFB",
// color: "#FC9708",
background: "#2E5AFB",
// shadowColor: "3px 8px 17px 1px rgba(252, 151, 8, 0.6)",
shadowColor: "#2E5AFB",
shadowOffsetX: 4,
shadowOffsetY: 5,
shadowBlur: 10,
borderRadius: "4 4 0 0",
// opacity: 0.6
},
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);
window.addEventListener('resize',()=>{
bar.resize();
})
},
