foreword
During project development, a report function needs to be made. After looking at the UI diagram, it is preliminarily decided to use it
echarts. However, the previous useechartswas developed under the framework ofVue2and . It is the first time to use to develop echarts. Write down the process and some related configurations .Vue3react-hooks
1. Download the echarts package
npm install echarts --save
2. Introduce eaharts
import * as echarts from 'echarts' // 引入 echarts 核心模块
Notice:
- The above introduction is written in the echarts V5 version, because the download downloads the V5 version by default
- If you need to import on demand, please refer to echarts official website
The effect diagram is as follows:
3. use
import * as echarts from 'echarts' // 引入 echarts 核心模块
const index = () => {
const initChart = () => {
let chartDom: any = document.getElementById('chart')
let myChart = echarts.init(chartDom)
myChart.clear()
let option:any = null
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
title: {
show: true,
text: '各厂手续办理数量总览',
left: 10,
top: 10,
},
dataZoom: [
{
type: 'slider', // slider 代表有滑块，inside 代表内置，左右滑动
id: 'dataZoomX',
start: 0, // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
show: true, // 是否显示下方滚动条,默认为true
realtime: true, // 是否实时更新
minValueSpan: 5, // 显示数据的最小条数
maxValueSpan: 10, //显示数据的最大条数
fillerColor: "#CED4DD", //滑动块的颜色
xAxisIndex: [0], // 表示这个 dataZoom 组件控制 第一个 xAxis
handleSize: 0, //滑动条的 左右2个滑动条的大小
height: 10, //组件高度
bottom: 0, // 控制滚动条距离底部的位置;
borderColor: "#FAFAFA", // 边框颜色
backgroundColor: "#FAFAFA", //两边未选中的滑动条区域的颜色
showDataShadow: false, //是否显示数据阴影 默认auto
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
filterMode: "filter",
brushSelect: false // 滚动条上面的阴影
}
],
legend: {
top: 10,
right: 20
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: [], // 数组-数据
axisLabel: {
interval: 0,
},
}
],
yAxis: [
{
type: 'value',
// splitNumber: 5 // Y轴坐标精度，默认为5
}
],
series: [
{
name: '已完成',
type: 'bar',
stack: 'overlap',
label: {
show: true,
position: 'inside'
},
emphasis: {
focus: 'series'
},
data: [], 数组-数据
itemStyle: {
color: '#0194FE'
}
},
{
name: '办理中',
type: 'bar',
stack: 'overlap',
emphasis: {
focus: 'series'
},
label: {
show: true,
position: 'inside'
},
data: [], 数组-数据
itemStyle: {
color: '#5CDBD3'
}
},
{
name: '未办理',
type: 'bar',
stack: 'overlap', // stack: 'Ad', 好像也有同样效果
emphasis: {
focus: 'series'
},
label: {
show: true,
position: 'inside'
},
data: [], 数组-数据
itemStyle: {
color: '#FFC53D'
}
},
]
};
myChart.resize()
option && myChart.setOption(option);
// 这个点击事件只限制于 点击柱形中有数据的部分，没有数据的部分，点击无效
myChart.on('click', function(params: any) {
handleGetBottomList(params.name, params.seriesName)
})
}
useEffect( () => {
initChart()
})
return (
<div id='chart'></div>
)
}
Related parameter configuration
1. Form a stacked histogram
In seriesthe configuration , stackset the parameters of each column object to the same 'overlap' / 'Ad'
2. Set the position of the header on the upper right
3. Set echarts histogram to scroll horizontally
4. The X-axis coordinate label text is too long to be displayed
- interval: the interval between each coordinate, it is fine to set 0 for normal display.
- rotate: Offset, it can also be said to be tilted. Values are of type number, as appropriate.
If offset is used, a new problem may arise, that is, if the left and right margins are not enough, the text will be partially blocked. At this time, the following configuration can be performed.
grid: {
left:"20%", //grid 组件离容器左侧的距离
right:"30px", //grid 组件离容器右侧的距离
bottom:"20%" //grid 组件离容器下边距的距离
}
5. Click on the histogram to call the method
If there is such a need in project development: click a certain histogram, call the interface to obtain some data of the histogram, you can do this:
myChart.on('click', function(params: any) {
// params 为柱状图的参数
// 如果是普通柱状图，使用 params.name (对应的x轴label) 参数
// 如果是折叠柱状图，使用 params.name params.seriesName (对应的属性)
// 如果还需要什么参数，可以打印 params 查找
console.log('params', params)
})