Recently, when working on a project, there are modules related to histograms, so here is a brief summary, and friends in need can refer to them by themselves. When it comes to graphic modules such as histograms, we naturally think of the echarts plug-in, which has graphic effects in various formats for us to use.
echarts document address: https://echarts.apache.org/examples/zh/index.html#chart-type-bar
1. Realize the effect:
2. Points to note
It is worth noting here : when we directly copythe code in echarts, the effect is like this. When there are many items in the abscissa, the abscissa text will not be displayed when it is automatically recognized as an even number, as follows but
we Most of the time, what is needed is to display them all. At this time, we need toadd interval: 0 to the axisLabel under xAxis , namely:
xAxis: [
{
type: "category",
axisLabel: {
interval: 0 // 让横坐标每一项都显示
},
},
]
If the abscissa of the histogram only needs to display one item, you only need to set series as one item, as follows
series: [
{
name: "总数",
type: "bar",
barGap: 0,
barWidth: 16,
color: ["#589EFF"],
tooltip: {
valueFormatter: function(value) {
return value;
},
},
data: [320, 332, 301, 334, 390, 220, 182, 191, 234, 290, 220, 182],
}
]
// 或者
series: {
name: "总数",
type: "bar",
barGap: 0,
barWidth: 16,
color: ["#589EFF"],
tooltip: {
valueFormatter: function(value) {
return value;
},
},
data: [320, 332, 301, 334, 390, 220, 182, 191, 234, 290, 220, 182],
}
3. Complete code
What I use here is vue implementation, which is not much different from using js native code implementation.
<template>
<div class="bar_label_rotation">
<div id="barLabelRotation" style="width: 100%;height:100%;"></div>
</div>
</template>
<script>
// 引入 echarts
import * as echarts from "echarts/core";
// 按需引入图表，需同步注册 echarts.use 使用
import {
PieChart, BarChart, LineChart } from "echarts/charts";
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
ToolboxComponent,
LegendComponent,
} from "echarts/components";
// 标签自动布局，全局过渡动画等特性
import {
LabelLayout, UniversalTransition } from "echarts/features";
// 引入 Canvas 渲染器
import {
CanvasRenderer } from "echarts/renderers";
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
DatasetComponent,
TransformComponent,
GridComponent,
ToolboxComponent,
BarChart,
LabelLayout,
UniversalTransition,
CanvasRenderer,
LegendComponent,
PieChart,
LineChart,
]);
let option = {
title: {
text: " ",
left: "center",
top: 20,
},
// 是否显示悬浮窗
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
textStyle: {
fontSize: 12,
// fontWeight:'normal',
},
},
// 设置echarts 的上下左右边距
grid: {
left: 20,
right: 0,
bottom: 24,
top: 20,
containLabel: true,
},
xAxis: [
{
type: "category", // 类别
axisTick: {
show: false },
axisLabel: {
color: "#8D8D8E",
fontSize: "12px",
interval: 0 // 让横坐标底部每项都显示文本
},
axisLine: {
lineStyle: {
color: "#CBCBCC" // 横坐标线条颜色
},
},
data: [ "领域1", "领域2", "领域3", "领域4", "领域5", "领域6", "领域7", "领域8", "领域9", "领域10", "领域11", "领域12" ],
},
],
yAxis: [
{
type: "value",
axisLabel: {
interval: 0,
formatter: "{value}",
color: "#8D8D8E", // 纵坐标文本颜色
fontSize: "12px" // 纵坐标文本字体大小
},
},
],
series: [
{
name: "总数", // 悬浮提示文本
type: "bar",
barGap: 0,
barWidth: 16, // 柱状图宽度
color: ["#589EFF"], // 设置柱状图背景色
tooltip: {
valueFormatter: function(value) {
return value;
},
},
data: [320, 332, 301, 334, 390, 220, 182, 191, 234, 290, 220, 182],
},
{
name: "已完成",
type: "bar",
barWidth: 16,
color: ["#03D96A"],
tooltip: {
valueFormatter: function(value) {
return value;
},
textStyle: {
fontWeight: "normal",
},
},
title: {
color: "red",
fontWeight: "bold",
},
data: [220, 182, 191, 234, 290, 320, 332, 301, 334, 390, 220, 182],
},
{
name: "预警",
type: "bar",
barWidth: 16,
color: ["#FF685B"],
tooltip: {
valueFormatter: function(value) {
return value;
},
},
title: {
fontWeight: "bold",
},
data: [150, 232, 201, 154, 190, 320, 332, 301, 334, 390, 220, 182],
},
],
};
export default {
name: "barLabelRotation",
data() {
return {
property: "value",
};
},
mounted() {
let el = document.getElementById("barLabelRotation");
// 初始化柱状图
var myChart = echarts.init(el);
option && myChart.setOption(option);
},
};
</script>