Echarts实例，在线引入echarts

最新推荐文章于 2025-03-14 10:15:39 发布

妮酱也爱敲代码

最新推荐文章于 2025-03-14 10:15:39 发布

阅读量8.4k

点赞数 4

文章标签： echarts

本文链接：https://blog.csdn.net/lildn/article/details/113250824

版权

下载地址 https://echarts.apache.org/zh/download.html
在这里插入图片描述
保存页面与html存于一个文件夹

引入在线版本echarts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个实例</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js">
    </script>
</head>

第一个实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个实例</title>
    //引入在线版本Echarts
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js">
    </script>
</head>
<body>
//背景
<div id="main" style="width: 400px;height: 400px;border: aqua 3px solid"></div>
//写Javascript语言
<script type="text/javascript">
    //初始化Echarts实例
    var myEcharts=echarts.init(document.getElementById('main'))
    //定义变量
    var option={
        //图例
        title:{text:'第一个手写的电子图'},
        //图例组件
        legend:{data:['销量'],textStyle:{color:'blue'}},
        xAxis:{data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']},
        yAxis: {},
        series: [{
        name: '销量',
        //柱状图
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]}]
    };
    //设置配置
        myEcharts.setOption(option);


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