[JavaScript知识库] 走马灯+echarts图表展示

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 走马灯+echarts图表展示 -> 正文阅读

[JavaScript知识库]走马灯+echarts图表展示

需要进行走马灯+echarts图表展示,后台返回数据为一次性返回

<el-carousel
     indicator-position="none"
     class="carousel"
   >
     <el-carousel-item
       v-for="item,index in length"
       :key="index"
     >

       <div
         class="online_echarts"
         :ref="`online_echarts${index+1}`"
         :id="`online_echarts${index+1}`"
       >

       </div>
     </el-carousel-item>
</el-carousel>

//data 后台返回数据
//每个图表展示六条数据
this.length = Math.ceil(data.length / 6)
for (let i = 0; i < this.length; i++) {
 this.initChart(res.rows.splice(0, 6), i + 1)
}

initChart (data, index) {
 this.$nextTick(() => {
   const chart = echarts.init(document.getElementById(`online_echarts${index}`))
   var option;

   option = {
     tooltip: {
       trigger: "axis",
       axisPointer: {
         type: "shadow",
       },
     },
     legend: {
       textStyle: {
         color: "#00d7ff", //图标字体颜色
       },
       icon: "circle",
     },
     grid: {
       left: "3%",
       right: "4%",
       bottom: "8%",
       top: "18%",
       containLabel: true,
     },
     xAxis: [
       {
         type: "category",
         axisLabel: {
           color: "#ffffff",
           rotate: 20,
           interval: 0,
           textStyle: {
             fontSize: '12',
           }
         },
       },
     ],
     yAxis: [
       {
         type: "value",
         name: "（%）",
         axisLabel: {
           formatter: "{value}",
           color: "#ffffff", //y轴字体颜色

         },
         splitLine: false, //背景线条
         axisLine: {
           show: true,
           lineStyle: {
             // color: "#ccc",
             // width: 1,
           },
         },
       },
     ],
     series: [
       {
         name: "",
         type: "bar",
         emphasis: {
           focus: "series",
         },
         barWidth: "8",
         data: data.map((item) => {
           return [item.devTypeName, ((item.onlineCount * 100) / item.deviceTypeCount).toFixed(2)];
         }),
         itemStyle: {
           color: "#1d9dcf"
         },
       },
     ],
   };

   option && chart.setOption(option);
 });
},