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.$属性名” 来使用。
上一篇: iOS视频添加背景音乐同时保留原音
下一篇: Android中微信抢红包助手的实现详解