jQuery中的插件和echarts使用

最新推荐文章于 2024-07-14 03:32:26 发布

weixin_45955339

最新推荐文章于 2024-07-14 03:32:26 发布

阅读量2.7k

点赞数 2

本文链接：https://blog.csdn.net/weixin_45955339/article/details/107683511

版权

jQuery插件
jquery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成。
注意
这些插件也是依赖于jQuery来完成，所以必须先引入jQuery文件，因此也称为jQuery插件
jQuery插件常用的网站:
1、jQuery插件库：http://www.jq22.com/
2、jQuery之家 http://www.htmleaf.com/
jQuery插件使用步骤
1、引入相关文件
2、复制相关html、css、js(常用插件)
echarts使用步骤
1、echarts地址
https://echarts.apache.org/
2、获取echarts
从 Apache ECharts (incubating) 官网下载界面获取官方源码包后构建。
在 ECharts 的 GitHub 获取。
通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”
通过 jsDelivr 等 CDN 引入
3、引入echarts

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

引入一个简单的图标
现需要为echarts提供一个具备宽高的容器

<div id="main" style="width: 600px;height:400px;"></div>

  var mycharts= echarts.init(document.getElementById("box"));

    //配置
    var option={
        title:{
            text:"Echarts条形图"
        },
        legend: {
            data:[{
                name:'销量',
                icon: 'circle',
                textStyle: {
                    color: 'red'
                }
            }],
            show:true
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    }
    //图标设置
    mycharts.setOption(option);

weixin_45955339

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery中的插件和echarts使用

jQuery插件jquery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成。注意这些插件也是依赖于jQuery来完成，所以必须先引入jQuery文件，因此也称为jQuery插件jQuery插件常用的网站:1、jQuery插件库：http://www.jq22.com/2、jQuery之家 http://www.htmleaf.com/jQuery插件使用步骤1、引入相关文件2、复制相关html、css、js(常用插件)...
复制链接

扫一扫