根据echarts官网案例 加上找到的demo做再次修改 实现：
建立一个简单的柱状图 设置宽高
<el-col :span="24" :style="{ height: height + 'px' }">
<div id="barEchrats" :style="{ width: '100%', height: '100%' }"></div>
</el-col>想要做成组件 所以数据做了props
props: {
xData: {
type: Array,
},
yData: {
type: Array,
},
},没有调用到props 在data做初始化假数据
data() {
return {
height: window.innerHeight / 3,
xAxisData: [],
xProgram: [
10, 22, 28, 43, 49, 10, 22, 28, 43, 49, 10, 22, 28, 43, 49, 10, 22, 28,
43, 49, 10, 22, 28, 43, 49,
], // 横轴数据
yProgram: [
5, 4, 3, 5, 10, 5, 4, 3, 5, 10, 5, 4, 3, 5, 10, 5, 4, 3, 5, 10, 5, 4, 3,
5, 10, 5, 4, 3, 5, 10,
], // 竖轴数据
};
},建立初始化方法
mounted() {
// 初始化
this.initCharts();
},this 会随着上下文环境而变换它的指向，在当前作用域中设置一个变量用来存储 this 可以防止在其他地方找不到 this 的错误。
initCharts() {
let that = this;
// id获取元素
const chartDom = document.getElementById("barEchrats");
// 全局引用的方式
var myChart = echarts.init(chartDom);
let option = {
color: [
"#5cc99e",
"#409af7",
"#f8cd46",
"#fa4da9",
"#faa346",
"#df5259",
],
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
},
},
grid: {
left: "10%",
right: "10%",
},
legend: {
top: "10",
itemWidth: 12.5,
itemHeight: 12.5,
data: [
{
name: "项目一",
// 强制设置图形为圆。
textStyle: {
color: "rgba(0, 0, 0, 0.7)",
},
},
{
name: "项目二",
// 强制设置图形为圆。
textStyle: {
color: "rgba(0, 0, 0, 0.7)",
},
},
],
},
xAxis: {
axisTick: { show: false },
axisLabel: {
textStyle: { color: "rgba(0, 0, 0, 0.7)", fontSize: 14 },
interval: 0,
formatter: function (value, index) {
return value.split("").join("\n");
},
},
data: [
"横向1",
"横向2",
"横向3",
"横向4",
"横向5",
"横向1",
"横向2",
"横向3",
"横向4",
"横向5",
"横向1",
"横向2",
"横向3",
"横向4",
"横向5",
"横向1",
"横向2",
"横向3",
"横向4",
"横向5",
"横向1",
"横向2",
"横向3",
"横向4",
"横向5",
], // 底部坐标轴
},
yAxis: [
{
axisLabel: {
textStyle: { color: "rgba(0, 0, 0, 0.7)" },
formatter: function (value, index) {
return value;
},
},
axisTick: { show: false },
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: "#14ABDF",
opacity: "0.15",
},
},
boundaryGap: [0, 0.1],
},
{
axisLabel: {
textStyle: { color: "rgba(255, 255, 255, 0.7)", fontSize: 14 },
formatter: function (value, index) {
return value + "%";
},
},
axisLine: {
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: "#14ABDF",
opacity: "0.15",
},
},
boundaryGap: [0, 0.1],
},
],
series: [
{
name: "项目一", // 最上方
data: that.xProgram,
type: "bar",
},
{
name: "项目二",
data: that.yProgram,
type: "bar",
},
],
};
// 绘制图表
if (option && typeof option === "object") {
myChart.setOption(option);
} // 此处仍需要再绘制一次，否则会出现第一个数据不显示的问题
window.addEventListener("resize", function () {
myChart.resize();
});
},x轴label竖向显示
formatter: function (value, index) {
return value.split("").join("\n");
},实现滑动
dataZoom 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。
现在支持这几种类型的 dataZoom 组件：
-
内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
-
滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条，用户在滑动条上进行缩放或漫游。
-
框选型数据区域缩放组件（dataZoomSelect）：提供一个选框进行数据区域缩放。即 toolbox.feature.dataZoom，配置项在
toolbox中。
// 滑动
dataZoom: [
{
type: "inside",
xAxisIndex: [0],
show: false,
startValue: 0, // 从头开始
endValue: 5, // 一次性展示几个
},
],实现循环效果
可以通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 或 dataZoom.radiusAxisIndex 或 dataZoom.angleAxisIndex 来指定 dataZoom 控制哪个或哪些数轴。
startValue 数据窗口范围的起始数值。
endValue数据窗口范围的结束数值
setInterval(function () {
// 每次向左滑动一个，最后一个从头开始。
// console.log("option.dataZoom[0].endValue", option.dataZoom[0].endValue);
// console.log("that.xProgram.length" + that.xProgram.length);
if (option.dataZoom[0].endValue == that.xProgram.length) {
option.dataZoom[0].startValue = 0;
option.dataZoom[0].endValue = 3;
} else {
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
}
if (option && typeof option === "object") {
myChart.setOption(option);
}
}, 3000);
运行效果