bootcss echarts_数据可视化插件使用（Echarts）

最新推荐文章于 2022-11-11 16:34:18 发布

weixin_39820437

最新推荐文章于 2022-11-11 16:34:18 发布

阅读量204

点赞数

文章标签： bootcss echarts echarts setoption方法 echarts示例

一、js包的引入：

方法：和jquery方法类似，在下面这个网站里下载相应的echarts包，然后放到js文件里，再在html中进行引用

下载 - Apache ECharts (incubating)www.echartsjs.com

二、cnd引入：

方法：和bookstrop方法引入类似，网址链接如下

BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务www.bootcdn.cn

例：<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <div id="main" style="width:600px;height:400px;"></div>
 <script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.min.js"></script>
 <script>
 //基于准备好的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]
           }]
       };
 // 为echarts对象加载数据
 myChart.setOption(option);
 </script>
</body>
</html>

图

weixin_39820437

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootcss echarts_数据可视化插件使用（Echarts）

一、js包的引入：方法：和jquery方法类似，在下面这个网站里下载相应的echarts包，然后放到js文件里，再在html中进行引用下载 - Apache ECharts (incubating)www.echartsjs.com二、cnd引入：方法：和bookstrop方法引入类似，网址链接如下BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务www.bootcd...
复制链接

扫一扫

bootcss echarts_数据可视化插件使用（Echarts）

“相关推荐”对你有帮助么？