实现效果
1、在下载---echarts
npm install echarts --save
2、项目中引入echarts
import * as echarts from 'echarts'
3、配置echarts---options
option = {
yAxis: {
type: 'category'
},
xAxis: {
type: 'value'
},
dataZoom: [
{
type: 'inside',
start: 20, //数据窗口范围的起始百分比。范围是:0 ~ 100。表示 0% ~ 100%。
end: 100,
yAxisIndex: 0, //设置控制yAxis
zoomOnMouseWheel: false, //设置鼠标滚轮不能触发缩放。
moveOnMouseWheel: true //不按任何功能键,鼠标移动能触发数据窗口平移。
}
],
dataset: { //存放的数据
source: [
{ keyName: 'key_1', keyValue: 120 },
{ keyName: 'key_2', keyValue: 110 },
{ keyName: 'key_3', keyValue: 100 },
{ keyName: 'key_4', keyValue: 90 },
{ keyName: 'key_5', keyValue: 80 },
{ keyName: 'key_6', keyValue: 70 },
{ keyName: 'key_7', keyValue: 60 },
{ keyName: 'key_8', keyValue: 50 }
]
},
series: [
{
type: 'bar',
barWidth: 50,
itemStyle: { //设置渐变色
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: 'orange'
},
{
offset: 1,
color: 'red'
}
]
}
}
}
]
};