echars的使用

1、首先引入echars的js文件该文件可从echars官网下载

在某些图表中可能会引用ecStat.js文件如线性回归散点图我们直接下载引用即可

<head>

    <title></title>

    <script type="text/javascript" src="js/echarts.js"></script>

</head>

2、创建一个容纳和显示echars图表的div容器

<body>

        <div id="ech" style="width: 600px;height: 500px"></div>

</body>

3、编写js显示echars图

	至于要是用那个图标我们直接从官网复制其option格式就行，其用法都一样

	我们仅仅复制下来是不能够显示的

	我们还需要使用 echarts的init方法得到echars的div容器

	然后就是复制官网的数据格式

        最后将option数据使用myChart.setOption(option);将数据放到对象中

<script type="text/javascript">

    window.onload=function (){

        var myChart = echarts.init(document.getElementById("ech"));

        alert("jj");

        var option = {

            tooltip : {

                trigger: 'axis',

                axisPointer : {            // 坐标轴指示器，坐标轴触发有效

                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'

                }

            },

            legend: {

                data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']

            },

            grid: {

                left: '3%',

                right: '4%',

                bottom: '3%',

                containLabel: true

            },

            xAxis : [

                {

                    type : 'category',

                    data : ['周一','周二','周三','周四','周五','周六','周日']

                }

            ],

            yAxis : [

                {

                    type : 'value'

                }

            ],

            series : [

                {

                    name:'直接访问',

                    type:'bar',

                    data:[320, 332, 301, 334, 390, 330, 320]

                },

                {

                    name:'邮件营销',

                    type:'bar',

                    stack: '广告',

                    data:[120, 132, 101, 134, 90, 230, 210]

                },

                {

                    name:'联盟广告',

                    type:'bar',

                    stack: '广告',

                    data:[220, 182, 191, 234, 290, 330, 310]

                }

            ]

        };

        myChart.setOption(option);

    }

巴特西

echars的使用

最新文章

热门文章