使用Echarts绘制柱状图
import './';
import { useEffect, useState } from 'react';
import * as echarts from 'echarts'
let chartRef = null
function App() {
// const [chartRef, setChartRef] = useState(null)
const initChart = () => {
chartRef = echarts.init(document.getElementById('chart'))
const option = {
title: {
text: '北极星',
// 自定义文本样式
textStyle: {
color: '#345345'
}
},
tooltip: {
// TODO 可以自定义返回值
// format: function(params) {
// return
// }
},
legend: {
data: [
{
name: '数量图',
icon: 'circle'
},
{
name: '占比图',
icon: 'circle'
}
],
itemWidth: 25,
itemHeight: 14,
},
xAxis: {
type: 'category',
data: ['大白', '小黑', '哈哈', '呵呵', '嘿嘿', '北极星超级超级超级超级', '超级', '小黑3', '你干嘛', '恶狠狠', '嘿嘿9',],
axisPointer: {
show: true,
type: 'line', //直线指示器,鼠标移入图形中间时会展示分割线
},
axisLabel: {
rotate: 23,
fontSize: 11,
formatter: (params) => {
if (params.length > 6) {
const pre = params.slice(0, 6)
const end = params.slice(6)
return pre + '\n' + end
}
return params
}
}
},
yAxis: [
{
type: 'value',
name: '单位：个',
position: "left",
},
{
type: 'value',
name: '百分比：%',
position: "right",
}
],
color: ['#73c0de', '#3ba272'],
series: [
{
name: '数量图',
type: 'bar',
data: [ 1200, 200, 150, 800, 170, 110, 130, 150, 800, 170, 110],
yAxisIndex: 0, //左侧y轴
barGap: '2%',//不同柱形图的间距，2%标识柱子宽度的百分2
label: {
show: true,
position: 'top',
distance: 5
}
},
{
name: '占比图',
type: 'bar',
yAxisIndex: 1, //右侧y轴
data: [ 12, 20, 15, 8, 17, 11, 29, 15, 8, 17, 11],
label: {
show: true,
position: 'top',
distance: 5
}
},
],
dataZoom: [
{
type: 'slider',
height: 20,
// 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%
start: 2,
end: 70
}
]
}
chartRef.setOption(option)
}
useEffect(() => {
initChart()
}, [])
return (
<div className="App">
<div className='box' id='chart'></div>
</div>
);
}
export default App;