首页 > 其他分享 >Echarts基础

Echarts基础

时间:2022-10-27 21:24:12浏览次数:42  
标签:bar name data 基础 line type Echarts echart

Echarts

步骤

  1. 初始化
    var echart = echarts.init(dom节点,主题)

    1. 定义选项option
        var option = {
      title标题
      legend图例
      color调试版本
      tooltip提示
      xAxis轴线X
      yAxis轴线Y
      series系列数据
      }
    
  2. 更新选项
    echart.setOption(option)

选项

  1. 标题title
    text文本

  2. 图例legend
    {data:["name1","name2"]}

  3. 提示tooltip
    name: "问答题"

  4. X轴线
    {data:["x1","x2",...]}

  5. Y轴线
    {data:["y1","y2",...]}

  6. 系列数据
    bar { name:'名称', type:'bar', }

 line
    {
name:'名称',
type:'bar',
smooth:'true',
areaStyle:'面的样式',
}
 pie
    {
name:'名称',
type:'bar',
radius:['10%','50%'],
data:[{name:'n1',value:40},{namr:'n2',value:50}],
left
top
}
label标签
show:true是否显示
position:”insideRight“位置
formatter格式
formatter: “{a}\n{c}分”
{a}系列名,{b}数据名 ,{c}数值,{d}百分百,

图表的类型

柱状图

type: "bar"

线形图

type: "line"

平滑线形图

type: "line"
smooth: true

面型图

type: "line"
areaStyle:{color: 'pink'}

饼形图

type: "pie"

颜色样式的控制

主题

light亮色
dark暗色
自定义主题

var echart = echarts.init(document.getElementById("container"),"purple-passion");

调色板

color:["#516b91","#c24fa1","#5af421","#824d11","#bac291","#51a291","#6b4f91","#542211",],

 itemStyle
    具体数据
        data:[{value:50,itemStyle:样式}]
    系列数据
        {name:"分析表",data:[],itemStyle:{}}
    normal:{正常样式}
    emphasis:{强调样式}
	

动画

动画延迟
动画时长
动画缓动函数:animationEasing:"bounceInOut"
    弹性布局

时间的监听
    echart.on(”事件名“,处理函数)

发送事件dispatchAction

标签:bar,name,data,基础,line,type,Echarts,echart
From: https://www.cnblogs.com/aureazjl/p/16833767.html

相关文章

  • javaSE基础-比较器
    Java比较器1、java对象正常情况下只能进行==或!=,不能进行比较大小。若需要比较对象的大小,需要实现两个接口中的任何一个:Comparable或Comparator2、Comparable接口......
  • 算法基础 Introduction
    算法要求正确性(Correctness)语法正确输入输出(IO)正确可读性(Readability)使用注释(不注释比坏注释好,代码易读比过多注释好)命名契合(camelCase、PascalCase、......
  • 微信小程序的基础配置
    在小程序中的前台、后台:用户当前页面运行或者操作小程序时称为前台,当用户点击左上角关闭或者离开微信时,小程序进入后台。销毁:小程序进入后台一定的时间或者系统资源占用过高......
  • 移动前端viewport的基础概念
    在PC端,视口指的是浏览器的可视区域,其宽度和浏览器的宽度一致,在css标准文档中,视口是所有CSS百分比宽度计算基础,为CSS布局限制了一个最大的宽度。viewport在移动端是一个很重......
  • HTML5 Canvas基础概念(一)
    Canvas基础知识:Canvas属于行内元素,使用Canvas绘制图形步骤:1、获取Canvas对象2、获取上下文环境对象context。3、开始绘制图形在Canvas对象中常用属性属性说明widthCanvas的......
  • python基础:hashilib加密模块
    目录hashilib加密模块1加密的含义简介2加密算法基本操作3加密补充说明(hashlib的特点)4加密操作的用处5优秀hash算法的特性hashilib加密模块hashlib是一个提供了......
  • python基础:subprocess子进程模块
    子进程模块subprocess模块模拟操作系统,执行命令并获取结果subprocess模块允许我们启动一个新进程,并连接到它们的输入/输出/错误管道,从而获取返回值。importsubproce......
  • python基础:logging日志模块
    目录logging日志模块1.如何理解日志2.日志的级别3日志的组成4日志配置字典logging日志模块1.如何理解日志​简单的理解为记录数据行为的文件。​......
  • Python基础22
    今日内容概要hashlib加密模块subprocess模块logging日志模块软件开发主要流程今日内容详细hashlib加密模块1.何为加密 将明文数据处理成密文数据让人无法看懂2......
  • Java学习中的基础知识
      学习Java首选肯定是要明白Java他的主要应用方向在哪,Java主要是用于web开发的。无论学习什么我们都知道,打好基础重要的重要性。但是Java的基础要想打扎实,并不是短时间......