快速上手echarts 新手也能3分钟利用echarts绘制一个好看的图表

最新推荐文章于 2023-09-19 04:18:15 发布

青山酒温如南

最新推荐文章于 2023-09-19 04:18:15 发布

阅读量524

点赞数 2

分类专栏：前端笔记文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/qq_51855957/article/details/126475732

版权

前端笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

新手也能3分钟利用echarts绘制一个好看的图表

一、引入eacharts

echarts下载地址

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

二、现在页面上设置一个给定宽高的盒子作为容器

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

三、通过 echarts.init0 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的图表

init()创建实例
option设置需要的数据、
- title标题
- legend图例
- xAxis x轴，填写具体不同的类别
- yAxis y轴，必须有但不填写数据，（会根据数据自动生成）
- series 数据数组：name 与图例对应，type：条形图bar，折线图line……data：与y轴
setOption(option)：创建图表
复制下面这段代码，
- 修改title的text
- xAxis的data改为对应x轴的数据
- legend的data和serise的name对应图例名称
- serise的data改为对应y轴的数据
- 简单四步轻松搞定！

<body>
    <div id="main" style="width: 600px;height:400px;"> </div>
	<script src="echarts.js"></script>
    <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>