vue效果之echarts柱状图轮播
list: [ { x: "张一", dataX: 13641 }, { x: "张一", dataX: 2000 }, { x: "张一", dataX: 3000 }, { x: "张一", dataX: 1 }, { x: "张一", dataX: 161 }, { x: "张一", dataX: 1 }, { x: "张一", dataX: 1 }, { x: "张一", dataX: 1000000 }, { x: "张一", dataX: 2 }, { x: "张一", dataX: 3 }, { x: "张二", dataX: 1 }, { x: "张二", dataX: 1 }, { x: "张二", dataX: 1 }, { x: "张二", dataX: 1 }, { x: "张二", dataX: 1 }, { x: "张二", dataX: 1 }, { x: "张二", dataX: 1 }, { x: "张二", dataX: 1 }, { x: "张二", dataX: 1 }, { x: "张二", dataX: 1 }, { x: "张一", dataX: 1 }, { x: "张一", dataX: 1 }, { x: "张一", dataX: 1 }, { x: "张一", dataX: 1 }, { x: "张一", dataX: 1 }, { x: "张一", dataX: 1 }, { x: "张一", dataX: 1 }, { x: "张一", dataX: 1 }, { x: "张一", dataX: 1 }, { x: "张一", dataX: 1 }, { x: "张二", dataX: 1 }, { x: "张二", dataX: 1 }, { x: "张二", dataX: 1 }, { x: "张二", dataX: 1 }, { x: "张二", dataX: 1 }, { x: "张二", dataX: 1 }, { x: "张二", dataX: 1 }, { x: "张二", dataX: 1 }, { x: "张二", dataX: 1 }, { x: "张二", dataX: 1 }, ],
let oldList = []; for (let i = 0; i < newVal.length; i += 9) { oldList.push(newVal.slice(i, i + 9)); } this.newList = []; for (let i = 0; i < oldList.length; i++) { this.newList[i] = new Array(); let x = [], dataX = []; for (let j = 0; j < oldList[i].length; j++) { x.push(oldList[i][j].name); dataX.push(oldList[i][j].efficiency); } this.newList[i].push({ x: x, dataX: dataX, }); } this.$nextTick(() => { console.log(" this.newList", this.newList); this.initPart(this.newList); });
oldList 把数组切割成9个一起的二维数组
this.newList 的数组结构为
[
[{x:[],dataX:[]}],
[{x:[],dataX:[]}]
]
<el-carousel trigger="click" height="150px" @change="changeh" indicator-position="none" :autoplay="false" > <el-carousel-item v-for="(item, index) in this.newList" :key="index"> <div class="myChart"></div> </el-carousel-item> </el-carousel>
initPart(canvas) { let roseCharts = document.getElementsByClassName("myChart"); for (let i = 0; i < canvas.length; i++) { let myChart = echarts.init(roseCharts[i], null, { renderer: "svg", }); myChart.clear(); myChart.resize(); // 绘制图表 let option = { backgroundColor: "transparent", legend: { show: false, }, grid: { containLabel: true, left: "5%", right: "5%", bottom: 10, top: "30%", }, xAxis: { type: "category", axisTick: { lineStyle: { color: "#3d5269", width: 1, }, show: false, }, axisLabel: { interval: 0, textStyle: { color: "#5CDEFF", }, }, splitLine: { show: false, }, axisLine: { show: true, lineStyle: { color: "#3d5269", width: 1, }, }, data: canvas[i][0].x, }, yAxis: { splitLine: { show: false, lineStyle: { color: "#253B75", }, }, axisLine: { show: false, }, axisLabel: { show: false, // textStyle: { // color: "#2ad1d2", // }, }, }, series: [ { data: canvas[i][0].dataX, type: "bar", barMaxWidth: "auto", barWidth: 14, zlevel: 3, itemStyle: { normal: { color: function (params) { return new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: "#38A5EA", }, { offset: 1, color: "#26E4BA", }, ]); }, }, }, // itemStyle: { // normal: { // color: function (params) { // if (params.value <= 190) { // return new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // { // offset: 0, // color: "#bc0165", // }, // { // offset: 1, // color: "#fd48b1", // }, // ]); // } // return new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // { // offset: 0, // color: "#38A5EA", // }, // { // offset: 1, // color: "#26E4BA", // }, // ]); // }, // }, // }, label: { show: true, position: "top", distance: 14, color: "#fff", }, // markLine: { // symbol: "none", // label: { // position: "middle", // formatter: "{b}", // }, // data: [ // { // name: "", // yAxis: 190, //res.targetTwo, // lineStyle: { // color: "#FF49B2", // }, // }, // ], // }, }, ], tooltip: { trigger: "axis", show: false, }, }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } },
.myChart {
width: 470px;
height: 125px;
}
总结: echarts的初始化得用class
let roseCharts = document.getElementsByClassName("myChart");