828棋牌官方客户端下载 当前位置:首页>828棋牌官方客户端下载>正文

828棋牌官方客户端下载

发布时间:2018-11-15

原标题:Vue使用Echarts以及Echarts配置分享

Vue使用Echarts以及Echarts配置分享


一、本篇文章将给大家分享如何在vue中使用echart以及echart各项配置,这些配置都是工作中比较常见以及常用到的,所以给大家分享下,希望对大家有用。

二、vue中使用echart。

1、首先下载echart依赖,这里采用的npm包管理工具,在项目中运行命令:

npm install echarts --save-dev

2、在main.js里引入echart:

import echarts from "echarts";

3、在vue中注册echart:

Vue.prototype.$echarts = echarts;

4、在vue中使用echart:

<template>
    <div style="height:400px;width: 1000px" id="echartDemo">
        
    </div>
</template>
<script>
    export default {
        data() {
            return {
                
            }
        },
        mounted(){
            initEchart()
        },
        methods:{
            initEchart(){
                //初始化echart实例,获取dom
                var echartDemo=this.$echarts.init(document.getElementById("echartDemo"));
                option = {
                    color: ["#618FC8"],
                    backgroundColor:"#F8F8F8",
                    tooltip : {
                        trigger: "axis",
                        axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                            type : "shadow"        // 默认为直线,可选为:"line" | "shadow"
                        }
                    },
                    grid: {
                        left: "3%",
                        right: "4%",
                        bottom: "3%",
                        top:20,
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : "category",
                            data : ["Decade Ⅰ", "Decade Ⅱ", "Decade Ⅲ"],
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis : [
                        {
                            type : "value",
                            min:1600,
                            max:2100,
                            interval: 50,
                        }
                    ],
                    series : [
                        {
                            name:"新增订单",
                            type:"bar",
                            barWidth: "40%",
                            data:[1770, 1852, 2000]
                        }
                    ]
                };
                echartDemo.setOption(option);
            }
        },
        components:{

        }
    }
</script>

5.如果echart中使用到的数据比较大比较多的话可以考虑放到vuex里边,小数据可直接放到data里边就可以。

三、echart的各项配置

1.先介绍下一些常见的全局配置:

1.1、title组件,包含表的主标题和副标题的相关配置;

1.2、legend组件,图例组件展现了不同系列的标记(symbol),颜色和名字。可以通过点击图例控制哪些系列不显示。

比如:

legend: {
data:["利润", "支出", "收入"]
},

1.3、xAxis,yAxis主要是X轴跟Y轴的一些配置;

1.4、tooltip组件也是用的比较多的,就是鼠标移上去那个提示框的配置。

 

1.5、toolbox工具栏。内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具。类似下图:

 1.6、grid主要是配置表中的整天布局,比如距离距离边距多宽等。

1.7、series是系列列表,可以理解为主要的列表数据已经配置都在里边,对象里边的type这代表为不同的表,比如bar代表柱状图。

2.下边进入实际开发中的常见配置。

2.1、第一个问题:当你X轴的文本过长或者想旋转斜着放这么办呢,这时候就需要自己配置xAxis的axisLabel,

比如想文本过长实现换行,则可以这样配置:

xAxis : [
                    {
                        type : "category",
                        data : xAxisdata,
                        axisLabel : {
                            interval : 0,
                            formatter : function(params){
                                var newParamsName = "";
                                var paramsNameNumber = params.length;
                                var provideNumber = 7;
                                var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                                if (paramsNameNumber > provideNumber) {
                                    for (var p = 0; p < rowNumber; p++) {
                                        var tempStr = "";
                                        var start = p * provideNumber;
                                        var end = start + provideNumber;
                                        if (p == rowNumber - 1) {
                                            tempStr = params.substring(start, paramsNameNumber);
                                        } else {
                                            tempStr = params.substring(start, end) + "
";
                                        }
                                        newParamsName += tempStr;
                                    }

                                } else {
                                    newParamsName = params;
                                }
                                return newParamsName
                            }

                        }
                    }
  ]

这个是7个字符就实现换行,如图:

如果想文本斜着放,旋转一些角度,则这样配置:

axisLabel:{
            show:true,
             rotate:45,
     },

则实现这样的效果:

2.不显示Y轴或者不现实X轴,或者数值显示更改:

show设为false则不显示。

3.要默认显示表格上的数值,则配置series下:

效果:

 

 4.多表混合的情况,比如一个柱状图和折线图混合,并且需要两个Y轴的情况,则:

yAxis: [
                {
                    type: "value",
                    min: 0,
                    name:"region",
                    max: 100.00,
                    interval: 10,
                    splitLine:{show: false},//去除网格线
                    axisLabel: {
                        formatter: "{value} %"
                    }
                },
                {
                    type: "value",
                    name: "Increase",
                    min: -100,
                    max: 600,
                    interval: 50,
                    splitLine:{show: false},//去除网格线
                    show:true,
                    axisLabel: {
                        formatter: "{value} %"
                    },
                }
            ],//配置两条Y轴

则在series下通过yAxisIndex去选择哪个Y轴,比如:

{
                    name:"West",
                    type:"bar",//柱状图
                    itemStyle:{
                        normal:{
                            color:"#D1D1D1",
                        }
                    },
                    data:West
                },
                {
                    name:"National",
                    type:"line",//折线图
                    yAxisIndex: 0,//选择第一个Y坐标
                    data:National,
                    itemStyle : {  
                        normal : {  
                            color:"#9F5E36",  
                            lineStyle:{  
                                color:"#9F5E36"  
                            },
                            borderWidth:5,
                            label: {show: true,color:"#000"},
                        }  
                    },  
                },

5.柱状图每个柱子需要配置不一样的颜色的时候怎么办呢?

series: [
                    {
                        type: "bar",
                        data: [18203, 23489, 29034, 14970],
                        itemStyle:{
                            normal:{
                                color:function(params){
                                    var colorList = ["#D4C880","#D1D1D1","#01A3D4","#8EA9C4"]; 
                                    return colorList[params.dataIndex] ;
                                }
                            }//多个颜色柱子
                        },
                        label:{
                            normal:{
                                show:true,
                                position:"right"
                            }
                        }
                        
                    },
                ]

效果图:

6、其他配置

textStyle一般为配置字体样式,包括颜色啊,字体大小等等;

formatter一般为自定义配置项。

时间问题,先给大家分享到这里,有时间再完善,有问题可评论里边一起探讨,谢谢。

当前文章:http://radiokey.biz/R/d11t7.html

发布时间:2018-11-15 01:58:48

带彩打牌是什么意思 德友圈有app吗 棋牌游戏代理赚钱 棋牌游戏金币场 棋牌游戏有app吗 亲朋棋牌充值中心 四川人自己的亲朋棋牌 网络棋牌是一场骗局 现金赌博棋牌游戏 有些人收棋牌账号干嘛

51308 52309 21354 24669 71539 8198486165 44944 14233

责任编辑:海邓通