vue整合echarts

最新推荐文章于 2024-09-29 21:30:28 发布

原创

最新推荐文章于 2024-09-29 21:30:28 发布 · 2.9k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#java #spring

该博客介绍了如何在Vue项目中下载并引入ECharts库，通过示例展示了如何创建一个柱状图和一个饼图。首先，通过npm安装ECharts，然后在组件中导入并初始化ECharts。接着，利用ECharts提供的配置项和数据，分别绘制了展示用户总数、销售总量、收益总额和景点总数的饼图，以及根据四个季度用户数据的柱状图。最后，后端通过返回不同季度的用户数量数据来动态填充图表。

下载并引入echarts

1.下载

npm i echarts -S

2.引入vue

import * as echarts from 'echarts';

3.使用

//<div id="main">的id对应
document.getElementById('main');

4.用一个柱状图和一个饼图举例

<template>
  <div>
    <el-row :gutter="10" style="margin-bottom: 40px">
      <el-col :span="6">
        <el-card>
          <div style="color:#409EFF;"><i class="el-icon-user"></i> 用户总数</div>
          <div style="padding: 10px 0;text-align: center;font-weight: bold">
            100
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div style="color:#f56c6c;"><i class="el-icon-s-data"></i> 销售总量</div>
          <div style="padding: 10px 0;text-align: center;font-weight: bold">
            $ 100,000,000
          </div>
        </el-card>
      </el-col>
      <el-col :span