【Vue.js + Element UI】之encharts的使用
echarts的使用
ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
在vue中的使用
安装
npm install -S echarts vue-echarts
在组件中的使用
/src/pages/statistics/Index.vue
<template>
<el-row :gutter="20">
<el-col :span="12">
<el-card class = "box-card">
<div class="chart1" ref="chart1"></div>
</el-card>
</el-col>
<el-col :span="12">
<el-card class = "box-card">
<div class="chart2" ref="chart2"></div>
</el-card>
</el-col>
</el-row>
</template>
<script>
import * as echarts from 'echarts'
export default {
mounted () {
this.$nextTick(() => {
this.echartInit1()
this.echartInit2()
})
},
methods: {
echartInit1 () {
// 初始化 echarts.init(DOM)
// console.log(echarts)
const chartObj = echarts.init(this.$refs.chart1)
// 定义图表的选项
const option1 = {
xAxis: {
// x坐标的设置
type: 'category',
// x坐标的描述
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
// y坐标的设置
type: 'value'
},
series: [
{
// data要展示的数据
data: [230, 130, 264, 228, 135, 224, 320],
type: 'line'
}
]
}
// 设置图片的选项
chartObj.setOption(option1)
},
echartInit2 () {
const chartObj = echarts.init(this.$refs.chart2)
var base = +new Date(2015, 1, 1)
var oneDay = 24 * 3600 * 1000
var date = []
var data = [Math.random() * 300]
for (var i = 1; i < 20000; i++) {
var now = new Date((base += oneDay))
date.push(
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
)
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]))
}
const option2 = {
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '10%']
}
},
title: {
left: 'center',
text: '大数据量面积图'
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: date
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%']
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 10
},
{
start: 0,
end: 10
}
],
series: [
{
name: '模拟数据',
type: 'line',
symbol: 'none',
sampling: 'lttb',
itemStyle: {
color: 'rgb(255, 70, 131)'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(255, 158, 68)'
},
{
offset: 1,
color: 'rgb(255, 70, 131)'
}
])
},
data: data
}
]
}
// 设置图片的选项
chartObj.setOption(option2)
}
}
}
</script>
<style scoped>
.chart1 {
width: 100%;
height: 400px;
/* border: 1px solid #e43961; */
}
.chart2 {
width: 100%;
height: 400px;
/* border: 1px solid #e43961; */
}
</style>