Echart折线图实现

最新推荐文章于 2024-08-01 12:00:00 发布

悲殤乀述裞微笑ing

最新推荐文章于 2024-08-01 12:00:00 发布

阅读量295

点赞数

分类专栏： Echarts 文章标签：大数据

本文链接：https://blog.csdn.net/Java_learneryy/article/details/106338498

版权

Echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先从echarts官网上下载echarts.js文件，通过标签方式直接引入构建好的 echarts 文件。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<!-- 引入 ECharts 文件 -->

<script src="echarts.min.js"></script>

</head>

</html>

然后在绘图前需要为 ECharts 准备一个具备高宽的 DOM 容器。

<body>

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->

<div id="main" style="width: 600px;height:400px;"></div>

</body>

就可以通过echarts.init方法初始化一个echarts实例并通过setOption方法生成一个简单的数据图。

<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>

悲殤乀述裞微笑ing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echart折线图实现

首先从echarts官网上下载echarts.js文件，通过标签方式直接引入构建好的 echarts 文件。<!DOCTYPE html><html><head><meta charset="utf-8"><script src="echarts.min.js"></script></head></html>然后在绘图前
复制链接

扫一扫

专栏目录