基于Echart.js一点总结

南顾与风

已于 2024-01-15 13:30:16 修改

阅读量2k

点赞数

分类专栏： js插件文章标签： Echart柱状图颜色更改 Echart柱状图多柱

于 2017-09-22 18:03:41 首次发布

本文链接：https://blog.csdn.net/weixin_37684345/article/details/78065713

版权

js插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Echart概述： Echarts，一个纯js的图库表，可以流畅的运行在pc端和移动端的设备上，底层依赖轻量级的Canvas类库Zrender,提供直接、生动、可交互性的可视化报表。

Ecahrt可生成饼图，折线图、柱状图、散点图和地域分布图等等各种图形，一般基于ajax请求所返回的数据然后进行解析，生成自己所需要的图形，一般返回map数据类型，

map中的key和value都可以以集合的形式进行存储，这样在前台解析的时候像图形中的那些横坐标中的值对应的是map的key中的集合，而value可以依次对应该坐轴值所表示的数据。

Echart一些用法总结：

像平常会经常用到的柱状图，我们可以在柱状图里面弄两条柱子具体配置如下：

$.ajax({
    type: "POST",
    url: "../activitys/lineFenbu.shtml",
    data: platform.getParam(),
    success: function (resp) {
        if (resp.status == 200) {
            if (resp.data == null) {
                return;
            }
            var myChart5 = echarts.init(document.getElementById('llaing'), 'macarons');
            option5 = {
                title: {
                    text: '前十省份地域分布信息',
                    x: "center",
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    },
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, 0],
                },
                xAxis: {
                    type: 'category',
                    data: resp.data.key
                },
                label: {
                    normal: {
                        show: true,
                        position: 'inside'
                    }
                },
                series: [
                    {
                        name: '扫码数',
                        type: 'bar',
                        data: resp.data.val,
                        itemStyle: {
                            normal: {
                                color: '#5B9BD5',
                            }
                        },

                    },
                    {
                        name: '访问量',
                        type: 'bar',
                        data: resp.data.vals,
                        itemStyle: {
                            normal: {
                                color: '#ED7D31',
                            }
                        }
                        ,

                    }
                    ,
                ]
            }
            ;
            myChart5.setOption(option5);
        }
    }
});