echarts一个页面有多个tooltip_Echarts！再也不用担心我的数据图形了
数据图形，你还在用canvas绘制吗？
你想让页面立马高大上吗？
你还在担心学习难度大吗？
不要担心，五分钟教会你
快捷制作各类炫酷的数据图形，客官请赏个眼往下看。
官网是最好的老师，链接：https://echarts.apache.org/zh/index.html
echarts其实就是渲染canvas，厉害的是团队封装的好。数据按固定格式(格式多样)给过去即可，还可以自定义样式。
入门：打开官网的文档 -> 教程 看五分钟上手
(https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts)
您懒得去官网学习？宠着！往下看即可
1、引入 ECharts
推荐使用cdn
(https://www.staticfile.org/)
(https://www.bootcdn.cn/)
<html><head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/echarts/5.0.0-alpha.2/echarts.common.min.js">script>head>html>2、绘制一个简单的图表
①在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<body> <div id="main" style="width: 600px;height:400px;">div>body>②通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，完整代码如下
<html><head> <meta charset="utf-8"> <title>EChartstitle> <script src="https://cdn.staticfile.org/echarts/5.0.0-alpha.2/echarts.common.min.js">script>head><body> <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>沾到编辑器即可预览哦，咱们看一下吧
将series，换成下边的试试
series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] },{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] },{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }]
3、想要深入使用的，建议看一下官网教程里的：使用 dataset 管理数据
(https://echarts.apache.org/zh/tutorial.html#%E4%BD%BF%E7%94%A8%20dataset%20%E7%AE%A1%E7%90%86%E6%95%B0%E6%8D%AE)
讲的是支持传输的数据格式
四、拿来就用
定好DOM 容器换option，然后数据格式改成demo里的即可
demo网址如下
https://www.makeapie.com/explore.html#sort=rank~timeframe=all~author=all
最后恭喜你！已经入门了，后边几篇带你深入了解！
喜欢就关注我吧，我会努力更新的！