在线代码编辑器-开发工具-核心编程

首页
零基础教程
分类浏览
编程
- Sentinel
- Go语言
- C语言
- 汇编语言
- Android
- Java工具库
- Spring Cloud Alibaba
- Spring Cloud
- Spring Data
- Spring Boot
- Spring Batch
- JSP/Servlet
- Hadoop
- Dubbo
- J2Cache
- Hibernate
- OpenJPA
- MyBatis
- ShardingSphere
- Freemarker
- Thymeleaf
- Activiti
- POI
- JMail
- Log4j
- LogBack
- Dom4j
- XML
- RxJava
- JasperReport
- JUnit
- JMock
- Apache Commons
- HttpComponents
- CGLib
- WebSocket
- ESAPI
- 设计模式
前端
- CSS/CSS3
- HTML5
- JavaScript
- JQuery
- DHTMLX
- 浏览器
- HTML
- 前端小知识
- Vue.js
- NodeJS
- ECharts
- Less
- UmiJS
- React
- Ant Design
- Bootstrap
- uni-app
- JS-XLSX
数据库
- SQL
- PL/SQL
- MySQL
- Oracle
- Redis
- SQLite
- MongoDB
- Zookeeper
- H2
服务器
- Podman
- Prometheus
- Tomcat
- JBoss
- RocketMQ
- Docker
- Nginx
- RabbitMQ
其他
- 程序员
- Maven
- SVN
- Git
- UML
- Windows
- 办公软件
- Axure
- Jenkins
- HTTP
- macOS
Java
Spring
Linux
AI
代码片段
Get小技能
面试题
开发工具

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts3 学习</title>
    <script src="https://www.hxstrive.com/cdn/libs/echarts/3.8.5/echarts.js"></script>
</head>
<body>

// 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例' // 设置标题
        },
        tooltip: {},
        legend: {
            data:['销量', '销售额'],
            selected: selected
        },
        // x轴
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        // y轴
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar', // 图表类型
            data: [5, 20, 36, 10, 10, 20]
        },{
            name: '销售额',
            type: 'bar', // 图表类型
            data: [5, 25, 33, 18, 15, 29]
        }]
    };

// 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    myChart.on('legendselectchanged', function(obj) {
        selected = obj.selected;
        console.log(selected)
    });

function getRandomeArray(len) {
        var t = [];
        for(var i = 0; i < len; i++) {
            t.push(Math.random()*30);
        }
        return t;
    }

function loadData() {
        option.series[0].data = getRandomeArray(6);
        option.series[1].data = getRandomeArray(6);
        myChart.setOption(option);
    }
</script>

</body>
</html>

在线代码编辑器

代码编辑区自动执行

预览效果

字符数: 0

提示: 输入完整的HTML代码，包括<!DOCTYPE>和<html>标签

关于

本网站专注于 Java、数据库（MySQL、Oracle）、Linux、软件架构及大数据等多领域技术知识分享。涵盖丰富的原创与精选技术文章，助力技术传播与交流。无论是技术新手渴望入门，还是资深开发者寻求进阶，这里都能为您提供深度见解与实用经验，让复杂编码变得轻松易懂，携手共赴技术提升新高度。如有侵权，请来信告知：hxstrive@outlook.com

链接

其他应用

开源镜像网站

公众号

在线代码编辑器

代码编辑区 自动执行

预览效果

选择模板

选择库和版本

库

版本

文件

代码编辑区自动执行