echarts怎么使用（最最最最简单版）（本质canvas）

最新推荐文章于 2024-05-28 11:11:34 发布

Mathilda91

最新推荐文章于 2024-05-28 11:11:34 发布

阅读量1k

点赞数 1

文章标签： javascript ViewUI

echarts怎么使用（最最最最简单版）（本质canvas）

一、总结

一句话总结：外部扩展插件肯定要写js啊，不然数据怎么进去，不然宽高怎么设置。本质都是canvas嵌套在页面上，比如div中。

1、echarts怎么使用？

引入js，指定控件，编写js

2、怎么让外部插件变得非常容易？

页面源代码和官方教程

二、echarts怎么使用（最最最最简单版）

三、自己测试（这么简单的吗，看百度教程）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>测试百度Charts</title>
 6     <script src="echarts.js"></script>
 7 </head>
 8 <body>
 9     <div id="main" style="height: 600px;width: 600px;"></div>
10     <div id="chart2" style="height: 600px;width: 600px;"></div>
11     <script type="text/javascript">
12         // 基于准备好的dom，初始化echarts实例
13         var myChart = echarts.init(document.getElementById('main'));
14 
15         // 指定图表的配置项和数据
16         var option = {
17             title: {
18                 text: 'ECharts 入门示例'
19             },
20             tooltip: {},
21             legend: {
22                 data:['销量']
23             },
24             xAxis: {
25                 data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
26             },
27             yAxis: {},
28             series: [{
29                 name: '销量',
30                 type: 'bar',
31                 data: [5, 20, 36, 10, 10, 20]
32             }]
33         };
34 
35         // 使用刚指定的配置项和数据显示图表。
36         myChart.setOption(option);
37     </script>
38 </body>
39 </html>