html 使用 Echarts

最新推荐文章于 2024-05-28 11:11:34 发布

笑望灬星辰

最新推荐文章于 2024-05-28 11:11:34 发布

阅读量3.5k

点赞数 2

文章标签： html js

本文链接：https://blog.csdn.net/hu1628299958/article/details/106578963

版权

html 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

echarts

2 篇文章 0 订阅

订阅专栏

Echarts 官网
在这里插入图片描述

注意项目开发就是下载压缩版平时修仙就下载源代码

也可以直接在线定制或者使用 npm 下载

npm install echarts

在这里插入图片描述
这里我使用npm下载

目录

对应

进入 /_echarts@4.8.0@echarts / dist

使用 vscode 编辑器打开dist 开始编码

在这里插入图片描述
创建 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./echarts.js"></script>
    <title>echartsDemo</title>
</head>
<body>
    <div id='echarts' style="width: 400px;height:400px;border:1px solid #eee"></div>
    <script>
        var charts = echarts.init(document.getElementById('echarts'))
        charts.setOption({
            title:{
                text: 'hello Echarts'
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            }]
        })
    </script>
</body>
</html>

效果
在这里插入图片描述

笑望灬星辰

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
html 使用 Echarts

Echarts 官网注意项目开发就是下载压缩版平时修仙就下载源代码也可以直接在线定制或者使用 npm 下载npm install echarts这里我使用npm下载目录对应进入 /_echarts@4.8.0@echarts / dist使用 vscode 编辑器打开dist 开始编码创建 index.html<!DOCTYPE html><html lang="en"><head> <meta charset
复制链接

扫一扫

专栏目录