Vue怎么使用Echarts创建图表
摘要：在后台管理系统中，我们经常会遇到图表，比如说：柱形图，饼状图，折线图，雷达图等等，而用来写图表插件有很多，我这里主要介绍Echarts在项目里怎么使用，官网地址如下：https://echarts.baidu.com/index.html，详细信息请阅览他们的官网文档和实例，各种图表都比较完善。
本文流程：
1.安装插件→2.引入Echarts→3.创建图表→4.修改样式→5.接入数据
一.安装插件
方法一：npm安装Echarts
npm install echarts -S
方法二：cnpm安装Echarts
1.首先我们需要安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.然后
cnpm install echarts -S
二.引入Echarts
方法一：全局引入
打开main.js文件引入Echarts
import echarts from \'echarts\'
然后将echart添加到vue的原型上，这样就可以全局使用了
Vue.prototype.$echarts = echarts
方法二：局部引入
全局引入会将所有的echarts图表打包，导致体积过大，所以我觉得最好还是按需要来局部引入，比如我们需要引入一个柱状图
// 引入基本模板
let echarts = require(\'echarts/lib/echarts\')
// 引入柱状图组件
require(\'echarts/lib/chart/bar\')
// 引入提示框和title组件
require(\'echarts/lib/component/tooltip\')
require(\'echarts/lib/component/title\')
这里require直接从 node_modules 中查找文件位置进行引入
三.创建图表
当你安装完插件和在页面里面引入图表之后，那么恭喜你可以创建图表了~
第一步：你首先得创造一个图表的容器，宽高必须是行内样式，单位必须是px
<template> <div id="myChart" :style="{width: \'1000px\', height: \'600px\'}"></div> </template>
注意：这样会出现一个问题，因为由于必须固定好宽高，你缩小屏幕的时候，图表不会随之适应的缩小，刷新页面才能适应，解决方法的实现请接着往下看
第二步：绘制图表，这里我们要注意，echarts初始化应在钩子函数mounted()中，挂载之后调用
<script> export default { data() { return { } }, //钩子函数 mounted(){ this.draw(); }, methods: { draw(){ // 初始化echarts实例 let myChart = this.$echarts.init(document.getElementById(\'myChart\')) // 绘制图表 var option = { //此处占用篇幅过大，先省略等下会进行解释 } //防止越界，重绘canvas window.onresize = myChart.resize; myChart.setOption(option);//设置option } } } </script>
解释：
第一点：省略处为绘制图表的代码，首先，你打开Echarts官网，找到实例，选取你项目里面需要用到的图表模板（样式差不多就行，下文会教你如何修改图表样式），点进去，然后你可以看到左侧的代码，把option = {}括号里面的内容放置到我上方省略的代码处，运行，你页面即可以看到你所需要的图表；
第二点：下方代码防止越界，重汇canvas处，即为可以解决掉屏幕缩小，图表不会随之适应的缩小的方法，原理为当浏览器发生resize事件的时候，让其触发echart的resize事件，重绘canvas
//防止越界，重绘canvas window.onresize = myChart.resize; myChart.setOption(option);//设置option
四.修改样式
当你创建完图表之后，你会发现你的图表和UI给的样式差距太大，这样写肯定是不能过关的，所以你得修改图表样式，现在我从图表的左上角说到右下角，如何去更改图表样式，首先先上两张图表的差异图：
图一为Echarts未修改过的柱形图：
图二为修改样式之后的柱形图：
样式修改方法：
1.左上角图例处：
//图例 legend: { data: [\'降水量\'],//与series的name对应 left: \'75%\',//图例的离左边位置，可以用像素，可以用百分比，也可以用center，right等 top: 12px,//图例离顶部的位置 itemWidth: 10,//图例图标的宽 itemHeight: 10,//图例图标的高 textStyle: { color: \'#878787\',//文字的具体的颜色 } },
2.右上角切换图形处：
toolbox: { show : true,//显示 feature : { magicType : {show: true, type: [\'line\', \'bar\']}, },//柱形图和折线图切换 right: \'6%\',//离右边的距离 },
3.中部图表X轴修改：
//x轴 xAxis: { type: \'category\', data: [\'1月\', \'2月\', \'3月\', \'4月\', \'5月\'],//x轴的数据 splitLine: {show: false},//去除网格分割线 // splitArea: {show: true},//保留网格区域 axisLine: {//坐标线 lineStyle: { type: \'solid\', color: \'#d8d8d8\',//轴线的颜色 width:\'1\'//坐标线的宽度 } }, axisTick: {//刻度 show: false//不显示刻度线 }, axisLabel: { textStyle: { color: \'#878787\',//坐标值的具体的颜色 } }, splitLine: { show: false//去掉分割线 }, },
4.中部图表Y轴修改：
yAxis: { name: \'单位：次\',//轴的名字，默认位置在y轴上方显示,也可不写 max: 30,//最大刻度 type: \'value\', axisLine: {//线 show: false }, axisTick: {//刻度 show: false }, axisLabel: { textStyle: { color: \'#878787\',//坐标值得具体的颜色 } }, minInterval: 5,//标值的最小间隔 splitLine: { lineStyle: { color: [\'#f6f6f6\'],//分割线的颜色 } } },
5.柱状图形修改：
series: [{ name: \'数量\',//每组数据的名字，与图例对应 data: [200, 300, 400, 350, 100],//数据 type: \'bar\',//柱状图 itemStyle: { normal: { color: \'#FD6B71\',//设置柱子颜色 abel: { show: true,//柱子上显示值 position: \'top\',//值在柱子上方显示 textStyle: { color: \'#FD6B71\'//值得颜色 } } } }, barWidth: 15//设置柱子宽度，单位为px }],
好吧！整体代码我也发一份，当你安装好插件和全局引入后，你可以用以下代码进行测试有没有成功，代码如下：
<template> <div class="MyAchievement"> <div class="MyAchievement-echart"> <div class="echart-title">我的业绩</div> <div class="echart-content"> <div id="myChart" :style="{width: \'1500px\', height: \'460px\'}"></div> </div> </div> </div> </template> <script> export default { data() { return { } }, mounted(){ this.drawLine(); }, methods: { drawLine(){ var myChart = this.$echarts.init(document.getElementById(\'myChart\'));//获取容器元素 var option = { tooltip : { trigger: \'axis\' }, grid: { left: \'6%\', right: \'6%\', bottom: \'6%\', containLabel: true }, legend: { data:[\'订单数量\',\'我的业绩\'], left: \'6%\', top: \'top\', itemWidth: 15,//图例图标的宽 itemHeight: 15,//图例图标的高 textStyle: { color: \'#3a6186\', fontSize:20, } }, toolbox: { show : true, feature : { magicType : {show: true, type: [\'line\', \'bar\']}, }, right: \'6%\', }, calculable : true, xAxis : [ { type : \'category\', data : [\'01-01\',\'01-02\',\'01-03\',\'01-04\',\'01-05\',\'01-06\',\'01-07\'], splitLine: {show: false},//去除网格分割线 axisTick: {//刻度 show: false//不显示刻度线 }, axisLine: {//坐标线 lineStyle: { type: \'solid\', color: \'#e7e7e7\',//轴线的颜色 width:\'2\'//坐标线的宽度 } }, axisLabel: { textStyle: { color: \'#3a6186\',//坐标值的具体的颜色 } }, splitLine: { show: false//去掉分割线 }, } ], yAxis : [ { type : \'value\', axisLine: {//线 show: false }, axisTick: {//刻度 show: false }, axisLabel: { textStyle: { color: \'#3a6186\',//坐标值的具体的颜色 } }, splitLine: { lineStyle: { color: [\'#e7e7e7\'],//分割线的颜色 } } } ], series : [ { name:\'订单数量\', type:\'bar\', barWidth: 20, data:[20, 35, 55, 60, 120, 150, 140], itemStyle: { normal: { color: \'#00abf7\',//设置柱子颜色 label: { show: true,//柱子上显示值 position: \'top\',//值在柱子上方显示 textStyle: { color: \'#00abf7\',//值的颜色 fontSize:16, } } } }, }, { name:\'我的业绩\', type:\'bar\', barWidth: 20, data:[40, 50, 90, 110, 130, 160, 150], itemStyle: { normal: { color: \'#ff4f76\',//设置柱子颜色 label: { show: true,//柱子上显示值 position: \'top\',//值在柱子上方显示 textStyle: { color: \'#ff4f76\',//值的颜色 fontSize:16, } } } }, } ] }; //防止越界，重绘canvas window.onresize = myChart.resize; myChart.setOption(option);//设置option } } } </script> <style lang="scss" scoped> .MyAchievement{ display: flex; flex-direction: column; padding:0px 90px; } .MyAchievement .MyAchievement-echart{ width: 100%; height: 570px; border-radius: 10px; border:1px solid #d3d9e9; box-shadow: 4px 6px 10px -2px #d3d9e9; background-color: #fff; display: flex; flex-direction: column; } .MyAchievement-echart .echart-title{ width: 100%; height: 70px; background-color: #00abf7; border-top-left-radius: 10px; border-top-right-radius: 10px; font-size: 26px; color: #fff; text-align: center; line-height: 75px; } .MyAchievement-echart .echart-content{ width: 100%; height: 500px; display: flex; // align-items: center; justify-content: center; } .echart-content #myChart{ margin-top: 35px; } </style>
五.接入数据
就比如上方柱形图，数据为data: [200, 300, 400, 350, 100],我们通过调用接口，把接口数据替换掉之前写死的数据即可，比如：
axios({ method:\'POST\', url:this.API.drawline, }).then(response => { //获取数据 this.draw= response.data; //把原先写死的数据替换为接口数据即可 //...... }).catch(err => { console.log(err); })
然后，后台返回的参数也许是上面那个格式的，我们直接替换就好，但也可能返回这种格式：
[ { num: 16, money: 500, day: "2019-03-15" }, { num: 17, money: 540, day: "2019-03-16" }, ]
这样我们就需要把参数取出放到一个新数组里面，再进行调用；
var newArrayday = [];//日期新数组 var newArraynum = [];//订单数量新数组 var newArraymoney = [];//我的业绩新数组 var j1 = 0; var j2 = 0; var j3 = 0; for(let i in this.draw){ newArrayday[j1++] = this.draw[i].day newArraynum[j2++] = this.draw[i].num newArraymoney[j3++] = this.draw[i].money } console.log(newArrayday) console.log(newArraynum) console.log(newArraymoney)
this.daylist=newArrayday;//定义
...
然后我们需要把之前图表方法里面的死数据替换成接口数据，这里需要注意，我们调用之后发现我们取到的数据为空，是因为我们图表调用方法写在了mounted里面了，我们需要把方法移至到接口成功方法里面：
axios({ method:\'POST\', url:this.API.drawline, }).then(response => { //成功调用图表方法 this.drawLine(); }).catch(err => { console.log(err); })
总结：希望对大家有所帮助，觉得好的可以点个关注，以后方便再来预览，也可以对我其他博客进行评价，一起学习，一起成长，有什么问题欢迎留言，我将第一时间更改，也谢谢大家能阅读到这里，你们的支持是我前进的动力！
版权声明：本文为hejun26原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。