推荐使用ECharts，vue-ECharts更新缓慢不推荐 安装好vue-cli后，cd 到项目目录下，npm 安装ECharts npm install echarts --save 方式一 在 src >> assets 下新建名为 js 的文件夹，并在该文件夹下创建 myCharts.js 文件 这个文件用来写所有的 ECharts 图表方法都封装在这里 ``` import echarts from 'echarts' let install = function(Vue) { Object.defineProperties(Vue.prototype, { $chart: { get() { return { //一个简单的示例 first_bar: function (id) { this.chart = echarts.init(document.getElementById(id)); this.chart.clear(); const optionData = { title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; this.chart.setOption(optionData); }, } } } }) } export default { install } ``` 在 main.js 文件内引入刚刚所创建的文件 import myCharts from '@/assets/js/myCharts' //引入eCharts 文件 Vue.use(myCharts) 在需要引入ECharts图表的插件页，调用已封装的方法，在页面上画出图表 ``` <template> <div id="chart"></div> </template> <script> export default { name: 'Home', mounted() { this.$chart.first_bar('chart'); //方法调用 } } </script> <style scoped> #chart { width: 300px; height: 300px; } </style> ``` ----------------------------- 方式二 不同于方式一，这种方式不需要新建单独文件，也不需要在main.js中引入，只需要在需要编辑图表的组件中，如下： ``` import echarts from 'echarts' //引入echarts export default { name: 'comRadar', //组件名 data(){ //子组件中定义data,必须是一个方法，并返回实例值，data:function(){return{}} return { myChart: {}, } }, methods:{//方法 Init:function() { //父级div大小改变，图表跟着变化，也可以写成 Init(){} window.addEventListener('resize', function() { this.myChart.resize() }.bind(this)) } }, mounted() {//生命周期钩子 this.myChart = echarts.init(document.getElementById("radar_case")); let optionData = { //图表数据（略） }; this.myChart.setOption(optionData) this.Init() //方法调用 }, } ``` 这样就可以了，同时这种方式，图表大小可以根据窗口改变大小。 页面数据改变地图显示移位 有时候经常遇到，地图引入，在第一页的时候将地图大小改变，当地图数据切换时，新的地图位置移位，这是因为只是改变了地图数据，地图并没有重新生成。 解决办法： //在setOption()方法中添加true，表示重新绘制。 this.chart.setOption(this.setOption(),true) 方法三 ``` <div id="qinshigaikuang"></div> <div id="chart"> <script> // 引入基本模板 const echarts = require('echarts/lib/echarts') // 引入柱状图组件 require('echarts/lib/chart/bar') require('echarts/lib/chart/pie') // 引入提示框和title组件 require('echarts/lib/component/tooltip') require('echarts/lib/component/title') export default { name: 'Home', data () { return { msg: 'Welcome to Your Vue.js App', i: 1 } }, mounted () { this.timer() // this.qinshigaikuang() // this.drawLine() }, methods: { // 这是一个定时器 timer () { return setInterval(() => { var i = this.i++ this.qinshigaikuang(i) this.drawLine() console.log(1) }, 30) }, qinshigaikuang (i) { // 基于准备好的dom，初始化echarts实例 const myChart = echarts.init(document.getElementById('qinshigaikuang')) // 绘制图表 myChart.setOption({ title: { text: '寝室概况', subtext: '沈阳农业大学', left: 'center' }, legend: { left: 'center', top: 'bottom', data: ['男生', '女生', '已入住', '未入住', '使用中', '未使用'] }, color: ['#6dd8da', '#b6a2de', '#009773', '#58afed', 'red', '#009773'], toolbox: { show: true, // true false feature: { magicType: { show: true, type: ['pie', 'funnel'] } } }, series: [ { name: '男女生比例', type: 'pie', radius: [30, 80], center: ['15%', '55%'], roseType: 'nanvn', data: [ { value: i, name: '男生' + i + '人' }, // 6948 { value: 9408, name: '女生9408人' } ], animationEasing: 'cubicInOut'// 开启动画 }, { name: '入住比例', type: 'pie', radius: [30, 80], center: ['50%', '55%'], roseType: 'ruzhu', data: [ { value: 3886, name: '已入住3886人' }, { value: 160, name: '未入住160人' } ] }, { name: '床位信息', type: 'pie', radius: [30, 80], center: ['80%', '60%'], roseType: 'chuangwei', data: [ { value: 16428, name: '使用中16428床位' }, { value: 1163, name: '未使用1163床位' } ] } ] }) }, drawLine () { // 基于准备好的dom，初始化echarts实例 const myChart = echarts.init(document.getElementById('chart')) // 绘制图表 myChart.setOption({ title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }) } } } </script> ```