首页 > 其他分享 >Echart使用

Echart使用

时间:2022-10-14 00:55:26浏览次数:72  
标签:Echart myChart 节点 init 使用 var data echarts

EChart


目录

目录

官网

https://echarts.apache.org/zh/index.html

导入

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.common.js"></script>

大体架构


<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: ['销量']
      },
      //x轴
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      //y轴
      yAxis: {},
      series: [
      	//存放每一组数据的配置
        {
       	 	//第一组数据
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        },
        {
   			//第二组配置
   		},
   		//...
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>
</body>

视图大小


通常来说,需要在 HTML 中先定义一个

节点,并且通过 CSS 使得该节点具有宽度和高度。初始化的时候,传入该节点,图表的大小默认即为该节点的大小,除非声明了 opts.width 或 opts.height将其覆盖。

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
</script>

需要注意的是,使用这种方法在调用 echarts.init 时需保证容器已经有宽度和高度了。

标签:Echart,myChart,节点,init,使用,var,data,echarts
From: https://www.cnblogs.com/szfzb/p/16790218.html

相关文章

  • Containerd-1.6.5 命令空间和task使用
    一、命令空间每个顶级配置块的命名都是plugin."io.containerd.xxx.xxx.xxx"这种形式,其实每个顶级配置块都代表一个插件。其中io.containerd.xxx.xxx表示插件类型,xxx后面......
  • 实验一 C语言开发环境使用和编程初体验
    实验任务一//实验任务一#include<stdio.h>intmain(){printf("O\n");printf("<H>\n");printf("II\n");return0;}task1_1.c//实验任......
  • 使用 Vue-cli 脚手架创建项目
    本次以WIN10系统为例,其他系统略有差异。第一步,安装npm:进入Node.js官网下载左侧稳定版,因为node包含npm由于node包含npm,所以我们只需要安装node就好了。进入Node.js官网首......
  • Oracle PDB的相关使用说明
    OraclePDB的相关使用说明摘要PDBpluggabledatabase是Oracle12c以上的版本(Oracle18c.oracle19c)新增加的一个特性.他可以实现灵活插拔的方式进行PDB的创建于使......
  • 解决 vue 项目使用 swiper 遇到设置轮播图自动播放不生效问题
    前言项目使用到swiper插件实现轮播图的功能,引入插件放上数据后,设置自动播放,但是发现没起效果,手动拖动可以解决方法安装指定版本可以安装以下版本的,设置自动播放没有......
  • springboot/spring使用ConfigurationProperties注解读取自定义属性(尚硅谷)
    pom.xml<?xmlversion="1.0"encoding="UTF-8"?><projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xs......
  • Windows 10使用Windows7图片查看器浏览图片
    Windows7服役即将结束,届时将停止操作系统更新及安全补丁的下发。笔者也在常识习惯Windows10开发环境。Windows7的图片浏览器大家应该很熟悉,可是到Windows10,图片就使用画板......
  • IDEA中使用插件sonarlint连接到SonarQube对代码质量进行管控
    申明:以下部分技术是网络上搜索来的,由于距离写本文时过去一段时间,无法再查找到原来网址,无法署名版权,如果您看到此处引用您的文字,请留言联系我署名版权,相应的办法归原作者所有......
  • ulimit 命令使用方法
    ulimint-a用来显示当前的各种用户进程限制Linux对于每个用户,系统限制其最大进程数,为提高性能,可以根据设备资源情况,设置个Linux用户的最大进程数,一些需要设置为无限制:......
  • eclipse使用
    下载​​参考​​​​下载地址​​​​版本介绍​​M1-M9就是说是Eclipse3的几个重要的里程碑版本,MilestoneRCx是发行候选版本!Release--正式发行版beta--测试版​​历史......