您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax |

Vue使用Echarts实现立体柱状图

51自学网 2022-05-02 21:32:43
  javascript

本文实例为大家分享了Vue使用Echarts实现立体柱状图的具体代码,供大家参考,具体内容如下

预览:

代码:

页面部分:

<template>  <div class="roadnum-all" ref="roadnumall">    <div id="roadnum" ref="dom"></div>  </div></template>

CSS部分:

.roadnum-all {  width: 100%;  height: 100%;      /*填满父级容器*/}

JS部分:

import echarts from 'echarts'   // 引入Echartsexport default {  name: "ltzzt",  data() {    return {      data: [],      dom: null    }  },  mounted() {    this.$nextTick(() => {      // 给图标宽高 使图标填满容器      document.getElementById('roadnum').style.width = this.$refs.roadnumall.offsetWidth + 'px';      document.getElementById('roadnum').style.height = this.$refs.roadnumall.offsetHeight + 'px';      this.draw();    })  },  methods: {    // 画图    draw() {      // 网络请求 假装从后端拿回来的数据      this.data = [        { name: '京哈高速', value: 10 },        { name: '京哈高速1', value: 20 },        { name: '京哈高速2', value: 30 },        { name: '京哈高速3', value: 40 },        { name: '京哈高速4', value: 50 },        { name: '京哈高速5', value: 60 },        { name: '京哈高速6', value: 70 },        { name: '京哈高速7', value: 80 },        { name: '京哈高速8', value: 90 },        { name: '京哈高速9', value: 100 },        { name: '京哈高速10', value: 110 },        { name: '京哈高速11', value: 120 }      ];      // 拼轴显示和数据的数组      let xAxisText = [];      let dataList = [];      this.data.forEach(item => {        xAxisText.push(item.name);        dataList.push(item.value)      })      // 从这里开始 创建自定义图形 
vue实现页面添加水印效果
vue基于echarts实现立体柱形图
51自学网,即我要自学网,自学EXCEL、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。
京ICP备13026421号-1