echart入门案例

以你之姓@ 2021-07-26 22:35 527阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        
        <script src="https://www.echartsjs.com/examples/vendors/echarts/echarts.min.js"></script>
    </head>
    <body>
        
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
    
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
    
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，527人围观）

还没有评论，来说两句吧...

相关阅读

相关 ECharts入门

文章目录 ECharts简介 Echarts特性 Echarts五分钟入门获取 ECharts 引入 ECharts

悠悠/ 2023年06月20日 06:54/ 0 赞/ 7 阅读

相关学习echarts入门

一、echarts介绍废话不多说，先上官方网站：https://echarts.apache.org/ ![echarts首页][echarts] 1、介绍

朴灿烈づ我的快乐病毒、/ 2023年01月23日 08:52/ 0 赞/ 112 阅读

相关 Vue echarts 入门

Vue使用 echarts 1. 安装 npm install echarts --save 1. 引入 `main.js` import e

以你之姓@/ 2022年12月22日 11:10/ 0 赞/ 159 阅读

相关 ECharts介绍入门

一、ECharts介绍现在主流的web图表控件主要有hightchart、fusionchart、echart； echart作为百度前端部门近期推出的一个基于ht

小鱼儿/ 2022年06月14日 07:24/ 0 赞/ 171 阅读

相关 echarts入门笔记

echarts学习笔记一、在echarts官网下载相应的版本二、在网页中引入echarts .表示当前的文件夹下的 ..表

小咪咪/ 2022年05月22日 07:22/ 0 赞/ 211 阅读

相关 echarts折线图案例基于echarts-plain.js

最近接触前端,要写个报表,但是由于公司用的是echarts-plain.js,导致我在网上找到的许多属性设置的东西由于就是不同而失去作用. 使用echarts-plain.

比眉伴天荒/ 2022年05月11日 18:04/ 0 赞/ 306 阅读

相关 ECharts图形报表入门案例

<script type="text/javascript" src="js/echarts.min.js"></script> <body> <!

谁借莪１个温暖的怀抱￠/ 2022年03月01日 01:48/ 0 赞/ 297 阅读

相关 Echarts 经典案例(Flask + Echarts)

通过此案例就可以知道如何使用： test.py !/usr/bin/python coding: utf-8 from flask import

落日映苍穹つ/ 2021年12月10日 17:53/ 0 赞/ 743 阅读

相关 echart入门案例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

以你之姓@/ 2021年07月26日 22:35/ 0 赞/ 528 阅读

相关 echarts 入门配置

非vue引入echarts.js文件 echarts必须要有个有高宽的容器来盛放地图 vue中配置: 1、cnpm

悠悠/ 2021年07月24日 21:10/ 0 赞/ 425 阅读