ECharts初试(1)

进入公司写的第一个小demo没想到会是用echarts完成一个图表效果。
UI图
刚看到图的时候,感觉不难,不过没想到,echarts官方api狠狠地打击我的自信心。
1.vue引入echarts

首先使用 npm install echarts --save
然后在main.js中引用	import echarts from 'echarts'
将其指向VUE实例的原型上	Vue.prototype.$echarts = echarts
//也可以按需引入,不过因为不知道需要配置哪些参数才能实现效果,就直接全部引入

2.创建DOM容器,初始化echarts实例,设置参数

//DOM容器
<div id="echarts" style="width: 600px;height:400px;"> </div>
//图形初始化
let echartsView = this.$echarts.init(document.getElementById('echarts'));
//参数存放的变量
let option = {}
//生成图表
echartsView.setOption(option);

3.参数配置

initEcharts(){
    /*数据处理*/
    this.dataPro(this.echartsData)
    /*序号图标加载*/
    let rankingIcons = {
        'one': require('./../assets/1.png'),
        'two': require('./../assets/2.png'),
        'three': require('./../assets/3.png'),
        'four': require('./../assets/4.png'),
        'five': require('./../assets/5.png'),
        'six': require('./../assets/6.png'),
        'seven': require('./../assets/7.png'),
        'eight': require('./../assets/8.png'),
        'nine': require('./../assets/9.png'),
        'ten': require('./../assets/10.png'),
    };
    /*参数配置*/
    let option = {
        title : {
            text:"Top10",
            top:30,
            textStyle:{
                color: 'red',
                fontSize: 20
            }
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                type : 'cross',
            },
            formatter: function(params) {
                /*自定义提示框*/
                var result = '';
                result += `<span style="display:inline-block;position: absolute;left: 5px">${params[0].axisValue}</span>`+"</br>"
                /*自定义提示框,小点添加*/
                let marker = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:rgb(40,210,240);"></span>`
                result += marker + "金额: " + params[0].value +"</br>";
                return result;
            }
        },
        grid:{
            /*预留容器左边空间*/
            left:120
        },
        xAxis: {
            show:false
        },
        yAxis: {
            type: 'category',
            data: this.nameRanking,
            axisLine:{show:false},     //不展现坐标轴的线
            axisTick: {show: false},   //不展现坐标轴的标点
            axisLabel:{
                formatter: function (value,index) {
                    let mapping = {
                        1:'ten',
                        2:'nine',
                        3:'eight',
                        4:'seven',
                        5:'six',
                        6:'five',
                        7:'four',
                        8:'three',
                        9:'two',
                        10:'one',
                    }
                    /*label返回格式*/
                    return '{value|' + value + '}{' + mapping[index+1] + '|}';
                },
                rich: {
                    value: {
                        height: 23,
                        padding:15,
                        lineHeight: 23,
                    },
                    one: {
                        height: 23,
                        lineHeight: 23,
                        width:23,
                        backgroundColor: {
                            image: rankingIcons.one
                        }
                    },
                    two: {
                        height: 23,
                        width:23,
                        lineHeight: 23,
                        backgroundColor: {
                            image: rankingIcons.two
                        }
                    },
                    three: {
                        height: 23,
                        width:23,
                        lineHeight: 23,
                        backgroundColor: {
                            image: rankingIcons.three
                        }
                    },
                    four: {
                        height: 23,
                        width:23,
                        lineHeight: 23,
                        backgroundColor: {
                            image: rankingIcons.four
                        }
                    },
                    five: {
                        height: 23,
                        width:23,
                        lineHeight: 23,
                        backgroundColor: {
                            image: rankingIcons.five
                        }
                    },
                    six: {
                        height: 23,
                        width:23,
                        lineHeight: 23,
                        backgroundColor: {
                            image: rankingIcons.six
                        }
                    },
                    seven: {
                        height: 23,
                        width:23,
                        lineHeight: 23,
                        backgroundColor: {
                            image: rankingIcons.seven
                        }
                    },
                    eight: {
                        height: 23,
                        width:23,
                        lineHeight: 23,
                        backgroundColor: {
                            image: rankingIcons.eight
                        }
                    },
                    nine: {
                        height: 23,
                        width:23,
                        lineHeight: 23,
                        backgroundColor: {
                            image: rankingIcons.nine
                        }
                    },
                    ten: {
                        height: 23,
                        width:23,
                        lineHeight: 23,
                        backgroundColor: {
                            image: rankingIcons.ten
                        }
                    }
                }
            },
        },
        series: [{
            data: this.valRanking,
            type: 'bar',
            barWidth:10,
            itemStyle:{
                /*正常时的样式*/
                normal: {
                    barBorderRadius:5,
                    borderWidth:1,
                    borderColor:'#ccc',
                    /*渐变色*/
                    color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: "rgb(50,210,230)" // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: "rgb(90,210,170)" // 100% 处的颜色
                    }], false)
                }
            },
            z:5
        },
            /*作为对比的背景*/
            {
            data: [300, 300, 300, 300, 300, 300, 300, 300,300,300],
            type: 'bar',
                /*两个Bar重合*/
            barGap: '-100%',
                /*取消各种事件的触发*/
            silent: true,
            barWidth:10,
            itemStyle:{
                /*正常时的样式*/
                normal: {
                    borderWidth:1,
                    borderColor:'#ccc',
                    color:'rgb(233,233,233)',
                    opacity:0.8,
                    barBorderRadius:5,
                },
                /*hover时的样式*/
                emphasis:{
                    borderWidth:1,
                    borderColor:'#ccc',
                    color:'rgb(233,233,233)',
                    opacity:0.8,
                    barBorderRadius:5,
                }
            },
            z:1
        }]
    };
},

效果基本实现,由于没有具体的颜色值和宽高,基本都是目测的,长得像就行了。

关键点
  1. 提示框
    提示框主要是需要重写效果,因为默认的效果中文字不是居右显示,并且会多一个底层(无填充部分的框)作为对比的数据。重写tooltip样式会缺失那个颜色的小点。需要用html文本自定义添加。颜色为参数的color属性,可以直接用marker。
  2. 序号图标
    序号图标也需要重写坐标轴axisLabel方法,主要是formatter中返回的格式
    {rich中样式名 | 需要使用该样式的内容}
  3. 颜色渐变
    最坑的就是颜色渐变,echarts官方api根本没有更新这个方法,辛辛苦苦找得怀疑人生。
    重写series中itemStyle
    /渐变色/
    color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: “rgb(50,210,230)” // 0% 处的颜色 },
    {offset: 1,color: “rgb(90,210,170)” // 100% 处的颜色 }], false)
    graphic.LinearGradient可以设置渐变色。第一个参数为渐变方向。分别为右/下/左/上
    第二个就是渐变色的设置了。

总体来说,还是学到了不少东西,至少为echarts的使用找到了入门的方向。
最后给大家看下我目测的结果图
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为了实现一个好看的echarts页面布局,可以按照以下步骤进行操作。首先,需要引入echarts库,你可以在main.js中将全局的echarts对象挂载到vue的原型对象上,这样可以在所有组件中使用echarts。 接下来,可以在项目初始化时创建全局样式表并导入iconfont字体文件,这样可以为页面添加更丰富的图标。同时,你还可以使用边框组件来美化页面的边框效果。 在页面布局方面,你可以使用Grid布局来进行划分,将页面分为多个区域,每个区域对应一个echarts图表。可以根据需求来决定每个区域的大小和布局方式。可以使用@jiaminghi/data-view等大屏数据可视化开源组件来辅助实现页面布局效果。 在每个区域中,可以使用echarts组件来生成不同类型的图表。可以在组件的template中编写echarts图表的配置代码,通过调整配置参数来实现不同的图表效果。为了更方便操作echarts,可以将echarts的option配置进行拆分,将初始化图表、获取数据、更新图表和屏幕大小适配等功能进行分离,以提高代码的可维护性和扩展性。 通过以上步骤,你可以实现一个好看的echarts页面布局,同时可以根据需要进行进一步的样式调整和功能扩展。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [初试vue写echarts可视化布局](https://blog.csdn.net/weixin_43990650/article/details/120781605)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值