JavaScript数据可视化：echarts.js初探

最新推荐文章于 2023-05-30 18:29:19 发布

bohn

最新推荐文章于 2023-05-30 18:29:19 发布

阅读量534

点赞数

分类专栏：特效框架文章标签： echarts js 框架

本文链接：https://blog.csdn.net/qq_39458856/article/details/82252622

版权

特效同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

框架

3 篇文章 0 订阅

订阅专栏

echarts.js是百度推出的组件,可以十分便捷的绘制图像

附：echarts.js文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="js/echarts.min.js"></script>
<div id="main" style="width: 600px;height: 600px">
</div>
<script>
    var main=document.getElementById("main")
    var myChart=echarts.init(main);
    var option={
        //设置标题
        title:{text:"demo02"},
        //设置画板显示的图像的
        //图例组件，通过点击图例控制系列的显示
        legend:{data:["系列一","系列二"]},
        xAxisIndex:{data:["x1","x2","x3","x4"]},
        yAxisIndex:{},
        series:[{
            //设置系列的名称
            name:"系列一",
            type:"pie",//饼图
            //设置图像所占画板的比例
            radius:"80%",
            //设置图像是否展示为南丁格尔图（通过半径区分数据大小）
            roseType:"angle",
            data:[
                {value:100,name:"p1"},
                {value:200,name:"p2"},
                {value:300,name:"p3"},
                {value:400,name:"p4"}
            ]
        },
            {
                name:"系列二",
                //饼图
                type:"pie",
                //设置图像所占画板的比例
                radius:"80%",
                roseType:"angle",
                data:[
                    {value:100,name:"p1"},
                    {value:200,name:"p2"},
                    {value:300,name:"p3"},
                    {value:100,name:"p4"}
                ]
            }]
    };
    myChart.setOption(option)

</script>
</body>
</html>

bohn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript数据可视化：echarts.js初探

echarts.js是百度推出的组件,可以十分便捷的绘制图像附：echarts.js文档&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/h
复制链接

扫一扫

专栏目录