使用vue-cli脚手架搭建,自己做个笔记
第一步 安装echarts依赖
npm install echarts -S
上面这个方法下载速度有点慢,可以用一下国内的淘宝镜像,用cnpm下载:
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S
第二步 引入echarts
1. 第一种是全局引入,在main.js中插入下面两句话
import echarts from 'echarts'
Vue.prototype.echarts = echarts
需要注意的是,应用echarts初始化的时候用this.echarts.init
2. 第二种就是局部引用,main.js不用写东西,只需要在需要用到echarts的地方导入一下即可
<script>
import echarts from 'echarts'
export default {
......
}
</script>
这边注意的是,应用echarts初始化的时候直接用echarts.init,大家可以在下面给的demo中试一下
图表实时自适应
把window的onresize事件赋值为echart的resize事件,当然这是单个图表的情况,要是多个图表,发现会不起作用
window.onresize = myChart.resize
多图表可以使用addEventListener
window.addEventListener('resize', () => {
this.myChart.resize()
})
demo1 (onresize)
<template>
<div id="historyTable" style="height: 600px; width: 100%"></div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'HelloWorld',
data () {
return {
time: [1, 2, 3, 4, 5, 6, 7],
temperature: [120, 132, 101, 134, 90, 230, 210],
humidity: [320, 332, 301, 334, 390, 330, 320],
CO2concentration: [220, 182, 191, 234, 290, 330, 310],
light: [150, 232, 201, 154, 190, 330, 410],
ph: [820, 932, 901, 934, 1290, 1330, 1320],
nutrientConcentration: [999, 1020, 528, 287, 398, 873, 256],
myChart: null
}
},
mounted () {
this.historyEcharts()
window.onresize = this.myChart.resize
},
methods: {
historyEcharts () {
this.myChart = echarts.init(document.getElementById('historyTable'))
let option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['温度', '湿度', 'CO2浓度', '光照', '酸碱度', '营养液浓度']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.time
},
yAxis: {
type: 'value'
},
series: [
{
name: '温度',
type: 'line',
data: this.temperature
},
{
name: '湿度',
type: 'line',
data: this.humidity
},
{
name: 'CO2浓度',
type: 'line',
data: this.CO2concentration
},
{
name: '光照',
type: 'line',
data: this.light
},
{
name: '酸碱度',
type: 'line',
data: this.ph
},
{
name: '营养液浓度',
type: 'line',
data: this.nutrientConcentration
}
]
}
this.myChart.setOption(option)
}
}
}
</script>
demo2 (addEventListener)
直接在HelloWorld.vue中进行修改,下面是HelloWorld.vue的demo
<template>
<div id="historyTable" style="height: 600px; width: 100%"></div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'HelloWorld',
data () {
return {
time: [1, 2, 3, 4, 5, 6, 7],
temperature: [120, 132, 101, 134, 90, 230, 210],
humidity: [320, 332, 301, 334, 390, 330, 320],
CO2concentration: [220, 182, 191, 234, 290, 330, 310],
light: [150, 232, 201, 154, 190, 330, 410],
ph: [820, 932, 901, 934, 1290, 1330, 1320],
nutrientConcentration: [999, 1020, 528, 287, 398, 873, 256],
myChart: null
}
},
mounted () {
this.historyEcharts()
window.addEventListener('resize', () => {
this.myChart.resize()
})
},
methods: {
historyEcharts () {
this.myChart = echarts.init(document.getElementById('historyTable'))
let option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['温度', '湿度', 'CO2浓度', '光照', '酸碱度', '营养液浓度']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.time
},
yAxis: {
type: 'value'
},
series: [
{
name: '温度',
type: 'line',
data: this.temperature
},
{
name: '湿度',
type: 'line',
data: this.humidity
},
{
name: 'CO2浓度',
type: 'line',
data: this.CO2concentration
},
{
name: '光照',
type: 'line',
data: this.light
},
{
name: '酸碱度',
type: 'line',
data: this.ph
},
{
name: '营养液浓度',
type: 'line',
data: this.nutrientConcentration
}
]
}
this.myChart.setOption(option)
}
}
}
</script>