成果如下：
此处用的echarts柱状图为：Axis Align with Tick
本文的要探讨的内容：
1、柱状图款式批改
2、多数据的缩放展现
柱状图款式批改
// 数据const city = reactive([ { value: 335, name: '长沙' }, { value: 310, name: '武汉' }, { value: 274, name: '岳阳' }, { value: 235, name: '重庆' }, { value: 380, name: '杭州' }])const cityName = reactive([]) // 城市-通过遍历将city的name放到cityName中const cityValue = reactive([]) // 值-通过遍历将city的value放到cityValue中// option 配置项const axisAlign = () => { let option = { // 线性突变，前四个参数别离是 x0, y0, x2, y2, 范畴从 0 - 1，相当于在图形突围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是相对的像素地位 color:{ type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#00fefb' // 0% 处的色彩 }, { offset: 1, color: '#0063ce' // 100% 处的色彩 }], global: false // 缺省为 false }, /* 鼠标移入的工具提醒 */ tooltip: { trigger: 'axis', axisPointer: { type: 'line' }, backgroundColor : 'rgba(0,0,0,0.4)', /* 背景色 */ borderColor: 'transparent', // 边框色 textStyle: { // 文字色彩 color : 'rgba(255,255,255,0.8)' } }, /* x y 轴的文字款式 */ textStyle:{ color: '#4c9bfd' }, // 轴下方指向的色彩 axisTick: { lineStyle : { color : '#096b80' } }, /* 布局 */ grid: { left: '0%', right: '0%', bottom: '10%', top: '4%', show: true, // 为true时容许批改款式 containLabel: true, borderColor: '#096b80' /* 边框的色彩 */ }, /* 直角坐标系 grid 中的 x 轴 */ xAxis: [ { type: 'category', data: cityName, /* 数据 */ axisTick: { alignWithLabel: true }, } ], /* 直角坐标系 grid 中的 y 轴 */ yAxis: [ { type: 'value', splitLine: { // y轴分割线配置 show:true, lineStyle: { color: "#096b80", } } }, ], /* 整体配置 */ series: [ { name: '用户统计', type: 'bar', barWidth: '60%', data: cityValue, } ] }; myChart.setOption(option);}多数据的缩放展现
某些状况下，柱状图须要展现十分多的数据并进行比对，如果咱们将所有的数据全都渲染进去会呈现数据的重叠或空间挤压，不不便观看且极不美观，如下图所示：
咱们能够将这种多数据柱状图改成区域缩放展现，在区域缩放中能够配置滑动缩放展现，用户在滑动条上进行缩放或漫游。外围配置就是dataZoom，在应用dataZoom之前须要引入和注册组件
// 引入和注册import { DataZoomComponent } from 'echarts/components';echarts.use([DataZoomComponent]);引入实现后就能够在option中配置dataZoom
/* 设置滚动条，解决数据过多的挤压问题 */dataZoom : [ { type: 'slider', // 滑动条型数据区域缩放组件 show: true, // 容许批改款式 /* start和end示意滚动条默认展现的比例,这里为1~50% */ start: 1, end: 50, height:15, // 滚动条高度 bottom:5, // 滚动条间隔底部地位 xAxisIndex: [0], // 对应xAxis中的data数据，数组中的第0位，如果是[0,2]则是数组中0~2位，这里xAxis的data中只有一个对象，所以选[0] }]这样一个简略的滑块缩放就实现了，以后的配置当中，除了滑块大小和地位外所有的款式都是官网提供的初始款式，为了融入我的项目整体，咱们须要给滑块配置款式
/* 设置滚动条，解决数据过多的挤压问题 */dataZoom : [ { type: 'slider', show: true, /* start和end示意滚动条默认展现的比例,这里为1~50% */ start: 1, end: 50, height:15, // 滚动条高度 bottom:5, // 滚动条底部地位 borderColor : '#4c9bfd', // 边框色彩 /* 滑块内数据的款式 */ dataBackground : { // 滑块内线条的色彩 lineStyle : { color : '#4c9bfd' }, /* 滑块内暗影的色彩 */ areaStyle: { color : '#4c9bfd' } }, /* 滑块内选中数据的款式 */ selectedDataBackground : { // 滑块内线条的色彩 lineStyle : { color : '#4c9bfd' }, /* 滑块内暗影的色彩 */ areaStyle: { color : '#4c9bfd' } }, xAxisIndex: [0], // 对应xAxis中的data数据，数组中的第0位，如果是[0,2]则是数组中0~2位 handleSize: '50%', /* 滚动条的左右滑块大小 */ moveHandleSize : 5, // 滚动条两侧手柄大小 moveHandleStyle : { // 滚动条款式 color : '#4c9bfd' }, textStyle: { // 滑块文字款式 color : '#4c9bfd' } }]
残缺的款式配置如下：
const axisAlign = () => { let option = { // 线性突变，前四个参数别离是 x0, y0, x2, y2, 范畴从 0 - 1，相当于在图形突围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是相对的像素地位 color:{ type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#00fefb' // 0% 处的色彩 }, { offset: 1, color: '#0063ce' // 100% 处的色彩 }], global: false // 缺省为 false }, /* 鼠标移入的工具提醒 */ tooltip: { trigger: 'axis', axisPointer: { type: 'line' }, backgroundColor : 'rgba(0,0,0,0.4)', /* 背景色 */ borderColor: 'transparent', // 边框色 textStyle: { // 文字色彩 color : 'rgba(255,255,255,0.8)' } }, /* x y 轴的文字款式 */ textStyle:{ color: '#4c9bfd' }, // 轴下方指向的色彩 axisTick: { lineStyle : { color : '#096b80' } }, /* 设置滚动条，解决数据过多的挤压问题 */ dataZoom : [ { type: 'slider', show: true, /* start和end示意滚动条默认展现的比例,这里为1~50% */ start: 1, end: 50, height:15, // 滚动条高度 bottom:5, // 滚动条底部地位 borderColor : '#4c9bfd', // 边框色彩 /* 滑块内数据的款式 */ dataBackground : { // 滑块内线条的色彩 lineStyle : { color : '#4c9bfd' }, /* 滑块内暗影的色彩 */ areaStyle: { color : '#4c9bfd' } }, /* 滑块内选中数据的款式 */ selectedDataBackground : { // 滑块内线条的色彩 lineStyle : { color : '#4c9bfd' }, /* 滑块内暗影的色彩 */ areaStyle: { color : '#4c9bfd' } }, xAxisIndex: [0], // 对应xAxis中的data数据，数组中的第0位，如果是[0,2]则是数组中0~2位 handleSize: '50%', /* 滚动条的左右滑块大小 */ moveHandleSize : 5, // 滚动条两侧手柄大小 moveHandleStyle : { // 滚动条款式 color : '#4c9bfd' }, textStyle: { // 滑块文字款式 color : '#4c9bfd' } }, ], /* 布局 */ grid: { left: '0%', right: '0%', bottom: '10%', top: '4%', show: true, // 为true时容许批改款式 containLabel: true, borderColor: '#096b80' /* 边框的色彩 */ }, /* 直角坐标系 grid 中的 x 轴 */ xAxis: [ { type: 'category', data: cityName, /* 数据 */ axisTick: { alignWithLabel: true }, } ], /* 直角坐标系 grid 中的 y 轴 */ yAxis: [ { type: 'value', splitLine: { // y轴分割线配置 show:true, lineStyle: { color: "#096b80", } } }, ], /* 整体配置 */ series: [ { name: '用户统计', type: 'bar', barWidth: '60%', data: cityValue, } ] }; myChart.setOption(option);}到这里咱们的柱状图配置就完结了~
最初附上官网配置项文档：https://echarts.apache.org/zh/option.html#title
如果感觉这篇文章对你有帮忙，欢送点赞、珍藏、转发✨哦~