欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue数据可视化——ECharts

程序员文章站 2024-02-13 19:37:52
...

完整实例代码:

<template>
  <div>
  	<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="echarts" style="width: 600px;height:400px;"></div>
    <input type="button" @click="mcharts" value="显示图表">
  </div>

</template>

<script>
	<!-- 引入 echarts -->
    import * as echarts from 'echarts';
    export default {
        name: "echarts",
        methods:{
            mcharts(){
            	<!-- 基于准备好的dom,初始化echarts实例 -->
                const myChart = echarts.init(document.getElementById('echarts'));
                <!-- 指定图表的配置项和数据 -->
                const option = {
                    title: {
                        text: '第一个 ECharts 实例'
                    },
                    tooltip: {},
                    xAxis: {    //  x轴的下标
                        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                    },
                    yAxis: {    //  y轴
                        type: 'value'
                    },
                    series: [{   //  y轴的数据
                        name: '销量',
                        type: 'line',    //  bar为柱状图,line为折线图,pie为饼图
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                };
                <!-- 使用刚指定的配置项和数据显示图表 -->
                myChart.setOption(option)
            }
        }
    }
</script>

<style scoped>

</style>

一、 Vue引入ECharts

1、项目中安装echarts依赖

npm install echarts -S

2、在使用ECharts的组件中引入(按照最新v5版本)

(1)全部引入

import * as echarts from 'echarts';
// 或
const echarts = require('echarts');

(2)局部按需引入

import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
// 注意,新的接口中默认不再包含 Canvas 渲染器,需要显示引入,如果需要使用 SVG 渲染模式则使用 SVGRenderer
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([BarChart, GridComponent, CanvasRenderer]);

注意:
v5版本去除default exports 的支持,所以不再支持import echarts from 'echarts'; 或者import echarts from 'echarts/lib/echarts';(按需引入)

二、准备一个呈现图标的盒子

<template>
  <div id="echarts" style="width: 600px;height:400px;"></div>
</template>

三、初始化ECharts实例对象

//document.getElementById('echarts')决定图表呈现的位置
var myChart = echarts.init(document.getElementById('echarts'));

四、准备配置项

		var option = {
                    title: {
                        text: '第一个 ECharts 实例'
                    },
                    tooltip: {},
                    xAxis: {    //  x轴的下标
                        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                    },
                    yAxis: {    //  y轴
                        type: 'value'
                    },
                    series: [{   //  y轴的数据
                        name: '销量',
                        type: 'line',    //  bar为柱状图,line为折线图,pie为饼图
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                };

五、使用刚指定的配置项和数据显示图表

myChart.setOption(option)

还有一种全局引入Echarts的方法,这样不用在每个页面都重复引入ECharts。

1、在main.js引入echarts并作为全局属性

//main.js文件
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts

2、在组件中直接使用

 const myChart = this.$echarts.init(document.getElementById('echarts'))

注意:
在组件中使用时必须用this.$echarts,因为自定义挂载在Vue的全局属性必须用 “this.$属性名” 来使用。

相关标签: Vue vue 可视化