ECharts简单使用

Apache ECharts

ECharts使用方法简单满足五个条件

Dom容器通俗地说就是一个div盒子，然后在官网挑选模板

<div class="box"></div>

然后编写index.js文件，使用立即执行函数，jQuery开篇用的就是立即执行函数。立即执行函数常用于第三方库，好处在于隔离作用域，任何一个第三方库都会存在大量的变量和函数，为了避免变量污染（命名冲突），开发者们想到的解决办法就是使用立即执行函数。引用jQuery文件。

(function() {
    //实例化对象
    var myChart = echarts.init(document.querySelector(".box"));
    //指定配置项和数据
    var option = {
        color: ['#2f89cf'],
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: "12"
                }
            },

            axisLine: {
                show: false
            }

        }],
        yAxis: [{
            type: 'value'
        }],
        series: [{
            name: "直接访问",
            type: "bar",
            // 修改柱子宽度
            barWidth: "35%",
            data: [10, 52, 200, 334, 390, 330, 220],
            itemStyle: {
                // 修改柱子圆角
                barBorderRadius: 5
            }
        }]
    };

    myChart.setOption(option);
})();

就可以了，以上就是假数据，详情请关注官网，获取更多资讯…

关于后端json字符串返回给前端，函数中要使用Ajax进行处理。并且使用循环。具体方法我还不太会。