这篇日志记录下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>
实现的效果如下图所示：
