ECharts3基础教程（一）简单上手篇

来源：互联网发布：总做白日梦知乎编辑：程序博客网时间：2024/06/07 16:09

要使用 ECharts3 绘制简单的图形，可以分为几个简单的步骤：

一、引入 ECharts

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <!-- 引入 ECharts 文件 -->    <script src="echarts.min.js"></script></head></html>

二、为 ECharts 准备具备宽高的 DOM 容器

<body>    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->    <div id="main" style="width: 600px;height:400px;"></div></body>

三、通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>ECharts</title>    <!-- 引入 echarts.js -->    <script src="echarts.min.js"></script></head><body>    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->    <div id="main" style="width: 600px;height:400px;"></div>    <script type="text/javascript">        // 基于准备好的dom，初始化echarts实例        var myChart = echarts.init(document.getElementById('main'));        // 指定图表的配置项和数据        var option = {            title: {                text: 'ECharts 入门示例'            },            tooltip: {},            legend: {                data:['销量']            },            xAxis: {                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]            },            yAxis: {},            series: [{                name: '销量',                type: 'bar',                data: [5, 20, 36, 10, 10, 20]            }]        };        // 使用刚指定的配置项和数据显示图表。        myChart.setOption(option);    </script></body></html>

下一篇会开始介绍 option 的相关配置。

阅读全文

0 0