echart3图表的一些基本配置

LeexMuller 发布于2019-08-21 13:31 / 388人阅读

摘要：最近有机会做了一个小的数据展示页面，用到了的曲线图，整个开发使用过程倒还顺利。就是在最后配置图表的折腾了蛮久，真心觉得的配置文档不够好。。。鼠标移动到地图标点上的颜色先记录这么多，以后遇到了再追加。。。

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

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

线条的颜色

全局修改，简单粗暴

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

逐条修改，各自为营

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"}}
    }
]

x轴坐标边框的颜色

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

x轴坐标文字的样式

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

y轴坐标边框的颜色

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

y轴坐标文字的风格

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

去掉x/y轴网格线

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

隐藏图例说明legend

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

隐藏保存为图片图标saveAsImage

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

还有几个effectScatter-map图的配置

地图上tooltip的显示格式

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

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

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

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

GPU服务器海外云主机配置阿里云window服务器的一些坑 java的一些代码深度学习的一些应用 php实用的一些代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87712.html

对web数据可视化的一些理解

摘要：本人也做过一些数据可视化相关的产品，下面聊聊对数据可视化的一些思考。这也是数据可视化最麻烦的一直，一般我们借助的地图，或者百度地图，高德地图等来开发，其实百度地图也出了个地图可视化的库，展示效果没有好。。。。最近几年随着大数据的兴起，以及浏览器性能的提升，数据可视化成为了一个热点，前端也冒出来了很多数据可视化的岗位。本人也做过一些数据可视化相关的产品，下面聊聊对数据可视化的一些思考。...

andong777 2019-08-20 16:28 评论0 收藏0
对web数据可视化的一些理解

摘要：本人也做过一些数据可视化相关的产品，下面聊聊对数据可视化的一些思考。这也是数据可视化最麻烦的一直，一般我们借助的地图，或者百度地图，高德地图等来开发，其实百度地图也出了个地图可视化的库，展示效果没有好。。。。最近几年随着大数据的兴起，以及浏览器性能的提升，数据可视化成为了一个热点，前端也冒出来了很多数据可视化的岗位。本人也做过一些数据可视化相关的产品，下面聊聊对数据可视化的一些思考。...

gotham 2019-08-01 16:48 评论0 收藏0
百度地图 osm地图 leaflet echarts webapck的组合使用时的踩坑记录

摘要：百度地图创建标签进行加载使用百度地图需要百度地图添加扩展，用于让百度地图支持地图可能会遇见两个问题地图图片错位忘记加载中使用的一个主要问题是默认图标的加载问题，详见另外也可以考虑使用动态创建标签的方法，类似百度地图加载百度地图因为本身支持的 webpack+百度地图创建 script标签进行加载 export function MP(ak){ return new Prom...

G9YH 2019-08-23 15:31 评论0 收藏0
2018年最佳JavaScript数据可视化和图表库

摘要：它有什么图表加粗文字如何使用这个图表库可以通过存储库下载或通过包管理器安装。数据可以直接从文件加载到图表中。它有什么图表如何使用该库可在包管理器和他们自己的内容传送网络中使用。该库专为风格的数据可视化而设计，提供一系列高度可配置的图表。现在有很多图表库，但哪一个最好用？这可能取决于许多因素，如业务需求，数据类型，图表本身的目的等等。在本文中，每个JavaScript图表库将与一些关键...

terasum 2019-08-02 11:51 评论0 收藏0