vue使用echarts（数据可视化）

安装

npm install echarts --save

按需引入并在.vue文件中使用

<!-- --> <template> <div class='echart'> <div>echarts</div> <div id="myEchart"></div> </div> </template> <script> var echarts = require('echarts/lib/echarts'); require('echarts/lib/chart/bar'); require('echarts/lib/component/tooltip'); require('echarts/lib/component/title'); export default { name: 'echart', components: { }, data() { return { params: { title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] } }; }, mounted () { let myChart = echarts.init(document.getElementById('myEchart')); myChart.setOption(this.params) }, //方法集合 methods: { } } </script> <style lang='scss' scoped> #myEchart{ width: 500px; height: 400px; } </style>

除了按需引入之外还有全局引入的方式（这是为了不用一个一个文件夹去找对应的eachrts文件来引入）但是这回消耗性能

main.js

import echarts from 'echarts' Vue.prototype.$echarts = echarts

vue文件中（由于参数太多就不写出来了）

<div id="EchartsAll"></div> mounted () { //全部引入 let myCharts = this.$echarts.init(document.getElementById('EchartsAll')) myCharts.setOption(this.params1) },

 面试中多次问到数据可视化，这里先入门一下后面在慢慢深入吧 下面是一些数据对应的含义

params1: { color:['#1E88F5','#FF8367','#DDFA8A', '#8ACDF3','#FFD986','#FF98BC'],//设置颜色 title: {//图标的标题 text: "天气情况统计", subtext: "虚构数据", left: "center" }, legend: {//显示图上都有哪些数据 width: 220, bottom: 0, left: 0, data: ["西凉", "益州", "兖州", "荆州", "幽州",'北京'], formatter: function(name) {//设置每个数据的现实信息 var index = 0; var clientlabels = ["西凉", "益州", "兖州", "荆州", "幽州",'北京']; var clientcounts = [735,634,510,535,1548,1135]; var num = 0 for (let i = 0;i < clientcounts.length;i++) { num += clientcounts[i] } clientlabels.forEach(function(value,i){ if(value == name){ index = i; } }); return name + " " + Math.floor(clientcounts[index]/num * 100) + '%'; } }, tooltip : {//设置鼠标经过对应的区域会提示区域的信息 trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, series: [ { center: ['50%', '50%'],//控制图标的位置 hoverAnimation:false,//鼠标移动到上面没有动画 label: {//提示对应区域的信息 normal: { show: false, position: 'center' }, }, type: "pie",//图标的类型（折线图，饼图等等） data: [//饼图的数据 { value: 1548,name: "幽州" }, { value: 535, name: "荆州" }, { value: 510, name: "兖州" }, { value: 634, name: "益州" }, { value: 735, name: "西凉" }, { value: 1135,name: "北京" } ] } ] }