这篇日志记录下vue安装及使用echarts。
1:安装:
npm install echarts –S
2:引入:
全局引入,会导致打包的时候将所有图表都打包,造成包的体积过大。
我没有使用这种方式,当然,这个看自己的需求。
按需引入:说白了就是在哪个页面使用,就在哪个页面引入。
echarts官方示例
http://www.echartsjs.com/examples/
上代码,这部分代码我是从我后台管理系统摘出:
<template>
<div>
<Breadcrumb :style="{margin: '24px 0'}">
<BreadcrumbItem>首页</BreadcrumbItem>
<BreadcrumbItem>数据概览</BreadcrumbItem>
</Breadcrumb>
<Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
<!-- {{title}} -->
<div id="myChart" :style="{width: '85%', height: '500px'}"></div>
</Content>
</div>
</template>
<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入折线图组件
require('echarts/lib/chart/line')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
// 引入axios组件
import axios from "axios";
import qs from "qs"; //处理数据 qs.stringify(params)
import {checkRule} from '@/assets/js/public';//引入公共js文件
export default {
data(){
return{
}
},
mounted(){
const self = this;
axios({
method: "post",
url: "你的url",
data: {}
})
.then(function (response) {
checkRule(response,self);//检查是否有权限
self.drawLine(response.data.date,response.data.number);
})
.catch(function (response) {
console.log(response);
});
},
methods: {
drawLine(date,number){
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: { text: '近七天注册人数统计' },
tooltip: {},
xAxis: {
data: date
},
yAxis: {},
series: [{
name: '注册人数',
type: 'line',
data: number
}]
});
}
}
}
</script>
实现的效果如下图所示:
有好的建议,请在下方输入你的评论。