js中ECharts的显示相关、动画、交互API、Koa2

九阈

于 2022-11-11 21:44:59 发布

阅读量944

点赞数

分类专栏： # JavaScript 文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/weixin_46048542/article/details/127809008

版权

JavaScript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

文章目录

一、显示相关

1.1主题的使用

内置主题
●ECharts中默认内置了两套主题:light dark
●在初始化对象方法init中可以指明

var chart = echarts.init(dom, 'light');
var chart = echarts.init(dom, 'dark');

自定义主题
●1.在主题编辑器中编辑主题
https://echarts.apache.org/zh/index.html
选择下载——主题下载也可以选择下面的定制主题
请添加图片描述
●2.下载主题,是一个js文件
●3.引入主题js文件
●4.在init方法中使用主题

1.2调色盘和颜色渐变

请添加图片描述
调色盘的作用遵循就近原则

1.3样式

请添加图片描述
优先级高,会覆盖主题中、调色盘的效果

<!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>
    <script src="js/echarts.min.js"></script>
</head>
<body>
    <div style="width: 600px;height:400px"></div>
    <script>
        var myChart = echarts.init(document.querySelector("div"))
        var pieData = [
            {
                name: '淘宝',
                value: 11231,
                // 控制淘宝这一区域的样式
                itemStyle: {
                    color: 'yellow'
                },
                label: {
                    color: 'red'
                },
                // 高亮样式
                emphasis: {
                    itemStyle: {
                        color: 'pink'
                    }
                }
            },
            {
                name: '京东',
                value: 22673
            },
            {
                name: '唯品会',
                value: 6123
            },
            {
                name: '1号店',
                value: 8989
            },
            {
                name: '聚美优品',
                value: 6700
            },
        ]
        var option = {
            title: {
                text: '直接样式和高亮样式的使用',
                // 控制标题的文字样式
                textStyle: {
                    color: 'blue'
                }
            },
            series: [
                {
                    type: 'pie',
                    data: pieData,
                    // 饼图文字的显示
                    label: {
                        show: true,
                        // 决定文字显示的内容
                        formatter: function(arg){
                            // console.log(arg)
                            return arg.name + '平台'+ arg.value + '元\n' + arg.percent + '%'
                        }
                    },
                }
            ]
        }
        myChart.setOption(option)

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

请添加图片描述

1.4图表自适应

请添加图片描述

     // 监听window窗口大小变化的事件
        window.onresize = function(){
            //调用echarts实例对象的resize方法

            myChart.resize()
        }

等价于

window.onresize = myChart.resize

请添加图片描述

二、动画的使用

2.1图表加载动画的实现

请添加图片描述

2.2图表增量动画

请添加图片描述

2.3图表动画的配置项

请添加图片描述

三、交互API

3.1全局echarts对象的常用方法

■全局echarts对象
全局echarts对象是引入echarts.js文件之后就可以直接使用的
■echartsInstance对象
eChartsInstance对象是通过echarts.init方法调用之后得到的

全局echarts对象
■init方法
初始化ECharts实例对象
使用主题
■registerTheme方法
注册主题
只有注册过的主题,才能在init方法中使用该主题
请添加图片描述

请添加图片描述
■connect方法
一个页面中可以有多个独立的图表
每一个图表对应一个ECharts实例对象
connect可以实现多图关联，传入联动目标为ECharts实例对象，支持数组。
保存图片的自动拼接
刷新按钮
重置按钮
提示框联动、图例选择、数据范围修改等…
请添加图片描述

3.2echartsInstance对象

请添加图片描述

四、Koa2

4.1Koa2介绍

请添加图片描述

4.2Koa2的快速上手

●检查Node的环境
node -V
●安装Koa
npm init -y
npm install koa
●创建并编写app.js文件
1.创建Koa对象
2.编写响应函数(中间件)
3.监听端口
●启动服务器
node app.js

请添加图片描述
创建文件夹koatext然后打开终端npm init -y
npm install koa
新建文件app.js

请添加图片描述

//1.创建koa对象
const Koa = require('koa')
const app = new Koa()


//2.编写响应函数（中间件）
//ctx:上下文  web容器 ctx.request  ctx.response
//next：下一个中间件，下一层中间件是否能够得到执行，取决于next这个函数有没有被调用
app.use((ctx,next)=>{
    console.log('第一层中间件...1');
    console.log(ctx.request.url)
    ctx.response.body = 'hello world'
    next()
    console.log('第一层中间件...2')
})
//第二层中间件
app.use(async(ctx,next)=>{
    console.log('第二层中间件...1')
    const ret = await next()
    console.log(ret);
    console.log('第二层中间件...2');
})
//第三层中间件
app.use((ctx,next)=>{
    console.log('第三层中间件')
    return 'i love the dog'
})


//3.绑定端口号 3000
app.listen(3000)