共计 4160 个字符，预计需要花费 11 分钟才能阅读完成。
成果如下：
此处用的 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
如果感觉这篇文章对你有帮忙，欢送点赞👍、珍藏💖、转发✨哦~
正文完