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

时间 2020-05-31

标签 echarts 怎么使用最最简单本质 canvas 繁體版

原文原文链接

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

1、总结

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

一、echarts怎么使用？

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

二、怎么让外部插件变得很是容易？

页面源代码和官方教程html

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

3、本身测试（这么简单的吗，看百度教程）

 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>

4、测试字符云（页面源代码和官方教程）

查看演示页面源代码，你还能有什么不懂的java

教程很是详细canvas