echars的使用

开发者雨婷技术 2022年11月7日

0 收藏 850 点赞 823 浏览 1102 个字

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);
    }