echarts详解

前言

ECharts是百度开发的一个国内比较常用的网页图表工具

引入ECharts

echars的引入十分简单,只需要在html中嵌入即可:

<!DOCTYPE html>
<html>
<head>
    <script src="echarts.js"></script>
</head>
</html>

Echarts官网下载得到的echarts.js 文件

生成echarts对象

要创建图表首先要给图表一个安置的空间,所以可以在body内嵌入一个空的

标签,赋值一个id,以用来存放图表对象,当然如果有多个图表那可以创建多个标签。

<!DOCTYPE html>
<html>
<head>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="container" style="height: 100%"></div>
<script>
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
</script>
</body>
</html>

这个myChart就是重点关注对象,之后的几乎所有图表方法都跟这玩意有关

设置配置项

 echarts的需要通过一个option对象来进行配置,详细配置项见官网说明文档

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

其中series是数据系列,可以有多个,在这个折线图中只设置了一个

载入option

myChart.setOption(option, true);

其中第二个参数为[notMerge],当设置为false时,如果更新数据将会合并新旧数据

完整版

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="echarts.min.js"></script>
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};
myChart.setOption(option, true);

       </script>
   </body>
</html>

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×