echarts的使用

官网：http://echarts.baidu.com

基本用法：

先写一个容器（例如下面的<div id="box"></div>）,然后获取box，初始化获取chart对象，let chart = echarts.init(box); chart.setOption({~~~~});

<script>
    window.onload = function(){
        let box = document.getElementById('box');
        let chart = echarts.init(box);
        // 设置配置
        let option = {
            title: {~~~},
            xAxis: [{
                data:[~~~~]
            }]， //若需要xy轴必须加上
            yAxis: [{}]， //若需要xy轴必须加上
            series:[
            {
                name: '~~~',
                type:'line/pie/bar....',
                data:[1,2,3...]
            } ,{}....],
            legend:{            // 图例
                data: ['~~~'] //这里要对应series的name
            }
            toolTip:{
                formatter: '{b}:{c}' //折线图上的数据点
            }
       };
       chart.setOption(option);
    }
</script>
<style>
    #id{
        width: 800px;
        height: 600px;
        border: 1px solid black;
        margin: 0 auto;
    }
</style>
<body>
    <div id="box"></div>
</body>

 

posted @ 2017-12-14 20:18  张啊咩  阅读(169)  评论(0)  编辑  收藏  举报