Echarts图表基本使用

CodeMonkey-D

于 2023-12-21 08:53:17 发布

阅读量1k

点赞数 24

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/HakerDONG/article/details/135122033

版权

Echarts图表

Echarts开发文档：https://echarts.apache.org/zh/option.html

echarts图表生成步骤：

导入Echarts的JS API
创建容器
创建一个实例
准备配置对象
更新配置到容器

<style>
    #container{
        width: 800px;
        height: 800px;
    }
</style>
<body>
<div id="container"></div>
</body>
<!--导入Echartsjs-->
<script src="./js/echarts.5.4.3.min.js"></script>
<script>
    // 1.创建一个实例
    // 获取容器节点
    let container = document.getElementById('container');
    // 初始化echarts
    var echart = echarts.init(container);
    // 2.准备配置对象
    let option ={
        // 图表的标题
        title:{
          text:"DJX的第一个演示",
          textStyle:{
              color:'#F32'
          }
        },
        // 图表提示
        tooltip:{

        },
        // 图例
        legend:{data:['睡眠时长','游戏时长','吃饭时常']},
        // X轴数据
        xAxis:{data:['Mon','Tue','Wes','Thr','Fri','Sta','Sun']},
        // Y轴数据
        yAxis:{},
        // 设置数据
        series:[
            {
                name:'睡眠时长',
                type:'bar',
                data:[6,7,8,9,6,7,8]
            },
            {
                name:'游戏时长',
                type:'line',
                //平滑处理
                data:[1,3,2,4,2,5,6]
            },
            {
                name:'吃饭时长',
                type:'pie',
                radius:[80,50],
                left: 600,
                top : -600,
                data:[
                    {name:'早饭',value:2},
                    {name:'午饭',value:1},
                    {name:'晚饭',value:3}
                ]
            }
        ]
    }
    // 3.更新配置到容器
    echart.setOption(option);
</script>

案例2：

<style>
    #container{
        width: 800px;
        height: 600px;
    }
</style>
<body>
<div id="container">
</div>
<script src="js/echarts.5.4.3.min.js"></script>
<script>
    // 初始化echarts
    let echart = echarts.init(document.getElementById("container"));
    // 准备配置对象
    let option = {
        // 图表标题
        title:{
            text:'堆叠'
        },
        // 工具箱
        toolbox: {
            show: true,
            feature: {
                //数据缩放
                dataZoom: {
                    yAxisIndex:'none'
                },
                dataView:{
                    //是否是只读数据
                    readOnly:false
                },
                magicType:{
                    type:['line', 'bar','pie']
                },
                restore:{},//重置
                saveAsImage:{}//保存图片
            }
        },
        //图表提示
        tooltip:{trigger : 'axis'},
        //图例
        legend:{data:['张三','李四']},
        // X轴
        xAxis: {},
        // Y轴
        yAxis: {data:['vue','js','html']},
        // 设置数据
        series:[
            {
                name:'张三',
                type:'bar',
                data:[65,84,90],
                stack:true,
                label:{
                    show : true,
                    type: 'bar',
                    position:'insideRight',
                    formatter:'{a}\n{c}分'
                }
            },
            {
                name:'李四',
                type:'bar',
                data:[72,54,80],
                stack:true,
                label:{
                    show : true,
                    type: 'bar',
                    position:'insideRight',
                    formatter:'{a}\n{c}分'
                }
            }
        ]
    }
    // 更新配置到容器
    echart.setOption(option);
</script>
</body>

案例三：

<style>
    #container {
        width: 1200px;
        height: 600px;
    }
</style>
<body>
<div id="container"></div>
<!--1.导入js -->
<script src="js/echarts.5.4.3.min.js"></script>
<script src="js/data.js"></script>
<script type="text/javascript">
    console.log(data);
    var trend = data.sort((a, b) => a.day - b.day);
    var echart = echarts.init(document.getElementById("container"));
    var option = {
        title: {
            text: 'xxxx趋势'
        },
        legend: {data: ['累计确诊']},
        tooltip: {},
        yAxis: {},
        xAxis: {data: trend.slice(0, 20).map(item => String(item.day).slice(-4))},
        series: [
            {
                name: '累计确诊',
                type: 'bar',
                data: trend.slice(0, 20).map(item => item.sure_cnt)
            }
        ],
        //每个执行延迟的时候（idx 就是下标 随着下标增大延迟会长）
        animationDelay: function (idx) {
            // 越往后的数据延迟越大
            return idx * 200;
        },
        animationDuration: function (idx) {
            // 每一小格的动画的时候
            return idx * 200;
        },
        //弹性方式出现动画
        animationEasing:'bounceInOut',
    }

    // var id = window.setInterval(move, 1000);

    function move() {
        //删除第一个元素
        var first = trend.shift();
        trend.push(first);

        option.xAxis.data = trend.slice(0, 20).map(item => String(item.day).slice(-4));
        option.series[0].data = trend.slice(0, 20).map(item => item.sure_cnt)
        //更新配置
        echart.setOption(option);
    }

    echart.on("mouseover", function () {
        window.clearInterval(id);
    })
    echart.on("mouseout", function () {
        id = window.setInterval(move, 1000);
    })
    //3.更新配置到容器
    echart.setOption(option);
</script>
</body>