图表如下:
代码如下:
import * as echarts from "echarts";//引入echarts
let chartDom = document.getElementById("histogram");
let chart = echarts.init(chartDom); //初始化实例
let option = {
color: ["#428FFC"], //柱状图颜色
tooltip: {//提示框组件
trigger: "axis",
axisPointer: {
type: "none", //虚线隐藏
},
formatter: function (params) {//提示内容
let relVal = "次数";
relVal +=
"<br/>" +
params[0].marker +
params[0].name +
" : " +
params[0].value.toLocaleString();
return relVal;
},
},
xAxis: {
type: "category", //类目轴,适用于离散的类目数据
data:["炭蛆病","蚜虫","茶饼病","炭蛆病","蚜虫","茶饼病","炭蛆病","蚜虫"], //x轴数据
axisLabel: { rotate: 30, color: "#70B1FF" }, //文字倾斜30度 文本颜色
axisTick: { show: false }, //隐藏x轴刻度
},
yAxis: {
type: "value", //数值轴,适用于连续数据
name: "识别次数", //y坐标轴名称
nameTextStyle: { color: "#70B1FF" }, //识别次数文本颜色
splitLine: { lineStyle: { color: "#B1DEFF" } }, //y轴线的样式
axisLabel: { color: "#70B1FF" }, //y轴文字颜色
max: 60,
min: 0,
splitNumber: 3,//每格刻度 60/3=20 间隔刻度为20
},
series: [
{
barWidth: 20, //柱状图的宽度
data: [23, 27, 46, 16, 37, 51, 45, 20], //每个柱状的高度
type: "bar", //bar 柱状图 line 线性图
label: { show: true, color: "#428FFC", position: "top" },//柱状图上方显示数据
showBackground: true,//柱状图是否有背景色
backgroundStyle: { color: "rgba(147,159,187,0.2)" }, //柱状图背景颜色
},
],
};
option && chart.setOption(option);