在Vue项目的路由组件中，使用echarts绘制表格

最新推荐文章于 2024-09-13 09:45:46 发布

nicole27ll

最新推荐文章于 2024-09-13 09:45:46 发布

阅读量539

点赞数 1

分类专栏：代码资源管理文章标签： visual studio code 前端框架 html echarts javascript

本文链接：https://blog.csdn.net/A56644664/article/details/121481222

版权

Echarts Vue 柱状图数据可视化前端开发

关键词由CSDN通过智能技术生成

代码资源管理专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、安装运行依赖echarts

二、使用echarts

（1）在路由组件JS代码处导入echarts.

// 1、导入echarts
import * as echarts from 'echarts'

（2）在HTML代码区为echarts准备一个容器

 <!-- 2、为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>

（3）在JS代码区，生命周期钩子mounted中配置相关数据（因为必须确保页面上的元素已经渲染完毕了才可以进行echarts的加载）

 mounted() {        // 必须在页面渲染完成以后才可以初始化echarts
        // 3、基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
    //   4、指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
    //   5、使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

（4）刷新页面就可以正常显示图表了。