echart3图表的一些基本配置

最近有机会做了一个小的数据展示页面,用到了echart3的曲线图,整个开发使用过程倒还顺利。
就是在最后配置图表的折腾了蛮久,真心觉得echart的配置文档不够好。。。

下面就以line-stack为例来说说一些配置项的修改!

线条的颜色

  • 全局修改,简单粗暴

itemStyle: {
    normal: {
        color: '#000'
    }
}

clipboard.png

  • 逐条修改,各自为营

series : [
    {
        name:'邮件营销',
        type:'line',
        stack: '总量',
        data:[120, 132, 101, 134, 90, 230, 210],
        lineStyle: {normal: {color: 'yellow'}}
    },
    {
        name:'联盟广告',
        type:'line',
        stack: '总量',
        data:[220, 182, 191, 234, 290, 330, 310],
        lineStyle: {normal: {color: 'red'}}
    },
    {
        name:'视频广告',
        type:'line',
        stack: '总量',
        data:[150, 232, 201, 154, 190, 330, 410],
         lineStyle: {normal: {color: 'blue'}}
    },
    {
        name:'直接访问',
        type:'line',
        stack: '总量',
        data:[320, 332, 301, 334, 390, 330, 320],
        lineStyle: {normal: {color: 'black'}}
    },
    {
        name:'搜索引擎',
        type:'line',
        stack: '总量',
        data:[820, 932, 901, 934, 1290, 1330, 1320],
        lineStyle: {normal: {color: 'orange'}}
    }
]

clipboard.png

x轴坐标边框的颜色

xAxis : [
    {
        axisLine: {
            lineStyle: {color: 'blue'}
        }
    }
]

clipboard.png

x轴坐标文字的样式

 xAxis : [
    {
        axisLabel : {
            show : true,
            textStyle : {
                color : '#f0f',
                align : 'left',
                fontSize: 16
            }
        }
    }
]

clipboard.png

y轴坐标边框的颜色

yAxis : [
    {
        type : 'value',
        axisLine: {
            lineStyle: {color: 'green'}
        },
    }
]

clipboard.png

y轴坐标文字的风格

yAxis : [
    {
        type : 'value',
        axisLabel : {
            show : true,
            textStyle : {
                color : '#0ff',
                align : 'right',
                fontSize: 16
            }
        }
    }
]

clipboard.png

去掉x/y轴网格线

 xAxis : [
    {
        type : 'category',
        boundaryGap : false,
        data : ['周一','周二','周三','周四','周五','周六','周日'],
        //看这里
        splitLine:{
            show:false
        }
    }
],
yAxis : [
    {
        type : 'value',
        //看这里
        splitLine:{
            show:false
        }
    }
]

clipboard.png

隐藏图例说明legend

legend: {
    //看这里
    show: false,
    data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
}

clipboard.png

隐藏保存为图片图标saveAsImage

toolbox: {
    feature: {
        saveAsImage: {
            show: false
        }
    }
}

clipboard.png

还有几个effectScatter-map图的配置

地图上tooltip的显示格式

tooltip : {
    trigger: 'item',
    //回调函数更加灵活
    formatter: function (params) {
        return params.seriesName + params.value[3] + " " + params.name + ':' + params.value[4];
    }
    //字符窜格式化方便点,不是很灵活。。。
    //formatter: '{a} {b}:{c}'
},

clipboard.png

鼠标移动到地图标点上的颜色

itemStyle: {
    normal: {
        color: '#f4e925',
        shadowBlur: 10,
        shadowColor: '#333'
    },
    emphasis: {color: 'red'}
}

clipboard.png

先记录这么多,以后遇到了再追加。。。


yangbai
如果非要用一种东西来记录我得生命历程,我会用朋友!

良好的心里,出众的发挥!

2.8k 声望
43 粉丝
0 条评论
推荐阅读
利用Charles做代理测试电脑上写的H5页面
做H5页面的同学可能经常会遇到一个场景,就是电脑上调试好的页面怎么在手机上访问测试呢? 下面就介绍一种自己经常使用的方式,利用Charles代理软件来实现! 安装Charles 直接去官网下载对应的系统版本安装即可。...

杨佰2阅读 5.8k

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 8.4k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy48阅读 6.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木75阅读 7k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.8k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木45阅读 8.5k评论 6

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木35阅读 6.6k评论 10

良好的心里,出众的发挥!

2.8k 声望
43 粉丝
宣传栏