Vue项目中使用echarts教程
- 步骤
-
- [npm 安装ECharts](#npm 安装ECharts)
- [引入 ECharts](#引入 ECharts)
-
- [老版本引入方式 （v4版本）](#老版本引入方式 （v4版本）)
- [新版本引入方式 （v5版本）](#新版本引入方式 （v5版本）)
- ECharts初体验
- ECharts组件化（进阶写法）
步骤
npm 安装ECharts
bash
npm install echarts --save引入 ECharts
- （1）全局使用：在项目入口文件main.js中引入Echarts
- （2）局部使用：就直接在所需要的页面中引入Echarts
老版本引入方式 （v4版本）
bash
//全部引入
import echarts from 'echarts';
// 或者按需引入
import echarts from 'echarts/lib/echarts';
//以下函数,是用在在main.js里面的
//通过Vue.prototype 将echarts保存为全局变量，才能真正使用
Vue.prototype.$echarts = echarts 新版本引入方式 （v5版本）
bash
//全部引入
import * as echarts from 'echarts';
// 按需引入
import * as echarts from 'echarts/lib/echarts';
//以下函数,是用在在main.js里面的
//通过Vue.prototype 将echarts保存为全局变量，才能真正使用
Vue.prototype.$echarts = echarts ECharts初体验
同一个页面里面 id 命名要是唯一的哦！！！
html
<template>
<!-- 关键声明： id 和 width 和 height 都会影响图表的展示-->
<div id="demo" style="width: 500px;height:400px;"></div>
</template>
<script>
export default {
name: "HelloWord",
mounted(){
//进入页面就执行一次
this.drawChart();
},
methods: {
drawChart() {
//2. 基于准备好的dom，初始化echarts实例
//此处的意思就是，对 demo 元素 进行图表初始化的相关操作
var myChart = this.$echarts.init(document.getElementById('demo'));
//3. 指定图表的配置项和数据
//该处就是图表内容，在官网的示例里面，要复制过来到项目里面的也是这一块内容
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: { //图例组件
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
//4.使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
},
}
</script>
<style scoped>
</style>ECharts组件化（进阶写法）
同一个页面里面 id 命名要是唯一的哦！！！
把需要图表vue页面，抽成子组件，供父组件使用，更加方便
ECharts图表子组件案例
son.vue
html
<template>
<div style="width:100%;height:100%;margin:0;">
<!-- 这个id接收父页传进来的id，也就是动态接收-->
<div :id="id style="width:100%;height:100%""></div>
</div>
</template>
<script>
//使用echarts局部引入的方式（我这边的版本是5版本）
import * as echarts from 'echarts';
export default {
props:["id","datas"],//接收父页传入值
data() {
return {
};
},
computed:{
},
watch:{
},
mounted() {
_this= this;
this.getChartData();
},
methods: {
getChartData() {
console.log("echar内部");
console.log("父页传入的datas",this.datas);
this.drawChart();
},
drawChart() {
//初始化echarts实例
let myChart = echarts.init(document.getElementById(this.id));
// 清空图表，重新渲染图表
myChart.clear();
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label:{
color: '#ffffff'
},
crossStyle: {
color: '#ffffff'
}
}
},
legend: {
data: ['短信推送量', '站内消息量'],
textStyle:{
color: '#ffffff'//字体颜色
},
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisPointer: {
type: 'shadow'
},
axisLabel: {
show: true,
textStyle: {
color: '#ffffff'
}
}
}
],
yAxis: [
{
type: 'value',
name: '短信推送量(条)',
nameTextStyle:{
color:"#ffffff",
},
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ',
textStyle: {
color: '#ffffff'
}
},
splitLine :{ //网格线
show:true, //隐藏或显示
lineStyle:{
type:'dotted' //设置网格线类型 dotted：虚线 solid:实线
},
}
},
{
type: 'value',
name: '站内消息量(条)',
nameTextStyle:{
color:"#ffffff",
},
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} ',
textStyle: {
color: '#ffffff'
}
},
splitLine :{ //网格线
show:true, //隐藏或显示
lineStyle:{
type:'dotted' //设置网格线类型 dotted：虚线 solid:实线
},
}
}
],
series: [
{
name: '短信推送量',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' 条';
}
},
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
]
},
{
name: '站内消息量',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + ' 条';
}
},
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
// 调用setOption
myChart.setOption(option)
//建议加上以下这一行代码
//不加的话,当浏览器窗口缩小的时候,样式会出现问题
window.addEventListener("resize", function() {
myChart.resize();
});
}
}
};
</script>父页（引用子组件的vue页面）
father.vue
html
<template>
<div>
<!-- 用v-if 保证图表初始赋值时能够正常显示内容-->
<div v-if="SonData!==null" style="height: 231px;">
<!-- 注意看我这边的id 接收的是静态的字符串字面量（表示不可更改）-->
<Son :id="'Son'" :datas="SonData"></Son>
</div>
</div>
</template>
<script>
//引入子组件
import Son from "./components/echarts/Son";
export default {
name: "father",
data() {
return {
SonData: null,
};
},
//import引入的组件需要注入到对象中才能使用
components: {
Son,
},
mounted(){},
methods: {},
}
</script>
<style scoped>
</style>参考文章
【1】Vue项目中使用echarts教程
https://blog.csdn.net/SatanDYG/article/details/115050822
【2】在vue中使用Echarts[官方5分钟上手ECharts]
https://www.cnblogs.com/ludeng-blog/p/12531903.html
【3】ECharts官网
https://echarts.apache.org/handbook/zh/basics/release-note/v5-upgrade-guide/