Vue怎么使用Echarts创建图表

发布时间:2019-03-02 整理:脚本之家 作者:未知
脚本之家收集整理的这篇文章主要介绍了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']},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
                        },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:'我的业绩',data:[40,50,90,110,130,160,150],itemStyle: {
                            normal: {
                                color: '#ff4f76',//值在柱子上方显示
                                    textStyle: {
                                        color: '#ff4f76',}
                ]
            };
            //防止越界,重绘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,我们通过调用接口,把接口数据替换掉之前写死的数据即可,比如:

axios({
       method:'POST',url:this.API.drawline,}).then(response => {
       //获取数据
       this.draw= response.data;
       //把原先写死的数据替换为接口数据即可
       //......           
}).catch(err => {
       console.log(err);
})

总结:希望对大家有所帮助,觉得好的可以点个关注,以后方便再来预览,也可以对我其他博客进行评价,一起学习,一起成长,有什么问题欢迎留言,我将第一时间更改,也谢谢大家能阅读到这里,你们的支持是我前进的动力!

总结

以上是脚本之家为你收集整理的Vue怎么使用Echarts创建图表全部内容,希望文章能够帮你解决Vue怎么使用Echarts创建图表所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

标签: