echarts-数据组件

最新推荐文章于 2024-06-03 23:02:52 发布

妮酱也爱敲代码

最新推荐文章于 2024-06-03 23:02:52 发布

阅读量80

点赞数

本文链接：https://blog.csdn.net/lildn/article/details/113369391

版权

ECharts 数据可视化饼图线图前端开发

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>myProject</title>
    <!-- 引入 lib/echarts.custom.min.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;border:3px solid red"></div>
    <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        grid:{left:'10%',right:'30%',height:'80%',bottom:'10%'},//设置图距离底板多少
        backgroundColor:'rgba(255,255,0,0.2)',//调整底板颜色
        color:['#ff7f50'],//图表颜色
        title:{x:'center',y:'top',text:'数据展示',
        subtext: '数据组件'},//标题
        xAxis: {type: 'category'},//数据源整合
        yAxis: {},
        dataset: {
            source: [//数据源
                    ['jan', 34, 20, 'XX', 52],
                    ['Feb', 28, 14, 'YY', 42],
                    ['Mar', 33, 22, 'ZZ', 44],
                    ['Apr', 33, 55],
                    ['May', 33, 55],
                    ['Jun', 33, 55],
                    ['Jul', 33, 55],
                    ['Aug', 33, 55],
                    ['Sep', 33, 55],
                    ['Oct', 33, 55],
                    ['Nov', 33, 55],
                    ['Dce', 33, 55],]
        },
        series: [{type: 'pie', center: ['70%', '20%'], radius: 35, encode: {itemName: 3, value: 4}},
            {type: 'line', encode: {x: 0,y:1}},
            {type: 'bar', encode: {x: 0, y: 2}}],
    }
    myChart.setOption(option);
    </script>
</body>
</html>