EChart的dataset

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

Daniel·M

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

阅读量422

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/DanielBlackCat/article/details/116662321

版权

ECharts 4 开始支持了数据集（dataset）组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这在不少场景下能带来使用上的方便

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 100%;
            height: 400px;
            /* border: 1px solid #f00; */
        }
    </style>
</head>

<body>
    <div id="box"></div>
</body>
<script src="./theme/dark.js"></script>
<script src="./lib/echarts.min.js"></script>
<script>
    //获取dom
    var box = document.getElementById('box')
        //初始化echarts图表对象
    var myEchart = echarts.init(box, null, {
        renderer: 'canvas'
    })

    //配置图表对象
    var options = {
        title: {
            text: '就业排行',
            subtext: '就业'
        },
        tooltip: {},
        dataset:{
            source: [
            ['产品年份', '2015', '2016', '2017'],
            ['Matcha Latte', 43.3, 85.8, 93.7],
            ['Milk Tea', 83.1, 73.4, 55.1],
            ['Cheese Cocoa', 86.4, 65.2, 82.5],
            ['Walnut Brownie', 72.4, 53.9, 39.1]
        ]
        },
        //图例
        legend: {
         
        },
        xAxis: {
            type:'category'
        },
        yAxis:[{}],
        series: [
            {type:'bar',yAxisIndex:0},
            {type:'bar',yAxisIndex:0},
            {type:'bar',yAxisIndex:0},
        ]

    }

    //指定给图表对象
    myEchart.setOption(options)
</script>

</html>
~~~![在这里插入图片描述](https://img-blog.csdnimg.cn/20210511171107778.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RhbmllbEJsYWNrQ2F0,size_16,color_FFFFFF,t_70)

Daniel·M

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EChart的dataset

ECharts 4 开始支持了数据集（dataset）组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以自由指定数据到视觉的映射。这在不少场景下能带来使用上的方便<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l
复制链接

扫一扫