使用Vue+Echert集成实现数据可视化

最新推荐文章于 2024-09-25 21:47:28 发布

浮生丶半日闲

最新推荐文章于 2024-09-25 21:47:28 发布

阅读量569

点赞数 1

文章标签：数据可视化 vue echarts

本文链接：https://blog.csdn.net/ls1850147551/article/details/116245690

版权

本文介绍了如何在Vue项目中集成Echarts进行数据可视化，提供了全局引入和按需引入两种方法。首先，通过npm或cnpm安装Echarts，然后在main.js中全局注册。接着在组件中创建图表，设置选项并初始化Echarts实例。对于按需引入，仅加载所需图表和组件，减少项目体积。示例代码展示了创建条形图的过程，总结时强调Vue集成Echarts的简易性和实用性。

摘要由CSDN通过智能技术生成

前言

这些年随着互联网的发展，越来越多的人对传统数字型的数据进行图表化，应运而生了很多可视化工具以及图标库，其中echarts 应该是国内做的最好的可视化库之一了，那我我使用选择 echarts无非它是开源免费，上手容易，而且它提供的样式模板基本都能满足大部分开发。
那不多bb，切入正题。

办法一

安装echarts依赖
npm用户：

//   二选一
npm install echarts --save

npm install echarts -S

cnpm用户：此处淘宝镜像

//   二选一
npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install echarts -S

全局引入
在 main.js 中引入 echarts

import echarts from ’echarts‘

Vue.prototype.$echarts = echarts

创建Demo测试
Demo.vue

<template>
	<div id="myChart" :style="{width: '450px', height: '300px'}"></div>
</template>
<script>
export default {
  name: 'Echarts',
  data () {
    return {
      msg: 'Vue + Echarts'
    }
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: { text: 'ECharts 入门示例' },
            tooltip: {},
            legend: {
              data: ["销量"]
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
  }
}
</script>

效果图

办法二

安装组件

npm install vue-echarts -S

导入需要的图表
如：

// echarts 按需引入
let echarts2 = require("echarts/lib/echarts");

// 引入折线图等组件
require("echarts/lib/chart/line");
require("echarts/lib/chart/bar");
require("echarts/lib/chart/radar");

// 引入提示框和title组件，图例
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");

Demo测试
Demo2.vue

<template>
    <div class="container">
        <div id="main1" class="box"></div>
        <div id="main2" class="box"></div>
        <div id="main3" class="box"></div>
    </div>
</template>
<script>
import echarts from "echarts";
// echarts 按需引入
let echarts2 = require("echarts/lib/echarts");
// 引入折线图等组件
require("echarts/lib/chart/line");
require("echarts/lib/chart/bar");
require("echarts/lib/chart/radar");
// 引入提示框和title组件，图例
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
export default {
    name: 'Info1',
    components: {},
    mounted() {
        this.initChart();
    },
    data() {
        return {};
    },
    methods: {
        initChart() {
            let myChart1 = this.$echarts.init(document.getElementById('main1'));
            let myChart2 = echarts.init(document.getElementById('main2'));
            let myChart3 = echarts2.init(document.getElementById('main3'));
            // 绘制图表
            myChart1.setOption(this.setOption('全局全部引入'));
            myChart2.setOption(this.setOption('局部全部引入'));
            myChart3.setOption(this.setOption('局部按需引入'));
        },
        setOption(title) {
            let option = {
                title: { text: title },
                tooltip: {},
                legend: {
                	data: ["销量"]
                },
                xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                yAxis: {},
                series: [{
                    name: "销量",
                    type: "bar",
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
        return option;
        }
    }
};
</script>
<style scoped>
.container {
    position: relative;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
}
.box {
    width: 300px;
    height: 300px;
    border: 2px solid #000;
}
</style>