1. 折线图

2. 柱状图  

3. 饼图

4. 地图

5. 雷达图

延申问题:画折线图和柱状图哪些配置可以改变样式

  1.  color  设置每个数据的颜色

  2. grid 网格设置图表的大小

  3. series 设置背景色等 ;

  4.  toolbox 工具箱组件 下载、转发等

学习 echarts :https://www.cnblogs.com/zhulongxu/articles/16590562.html

延申问题:怎么添加点击事件

通过 on 方法添加,第一个参数事件类型,第二个参数回调函数 ;

myChart.on('click', function(params) {
// 控制台打印数据的名称
console.log(params.name);
});

24. echarts 可以画哪些图表的更多相关文章

  1. 沉淀再出发:用python画各种图表

    沉淀再出发:用python画各种图表 一.前言 最近需要用python来做一些统计和画图,因此做一些笔记. 二.python画各种图表 2.1.使用turtle来画图 import turtle as ...

  2. jquery.wordexport.js打印echarts.js画出的柱状图

    jquery.wordexport.js打印echarts.js画出的柱状图. echarts画出的图是不能直接打印出来的(echarts的柱状图是用canvas画出来的),而jquery.worde ...

  3. echarts入门,5分钟上手写ECharts的第一个图表

    1.新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom. <!DOCTYPE html> <head> <meta charset=& ...

  4. vue和echarts 封装的 v-charts 图表组件

    https://v-charts.js.org/#/ 在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化.修改复杂的配置项,v-charts 的出现正是为了解决这个痛点.基于 Vue2. ...

  5. ECharts学习总结(一):ECharts的第一个图表

    在进行echarts图表开发之前先要到echarts官网下载echarts的库文件,我下载的是echarts-2.2.7.然后把库文件放到工程文件web目录下.接下来进行第一个图表的显示步骤如下: 1 ...

  6. echarts.js中的图表大小自适应

    echarts的图表,如果父级容器的height/width属性设置为百分比的形式,那么echarts就会warning,且不能正常的生成图表.所以div容器的高度宽度必须指定为px,这设计不知道是为 ...

  7. 使用Echarts实现动态曲线图表

    最近做的一个在线气象观测网站要实现一个需求:使用图表展示最近五天温湿度等气象要素的曲线变化 具体效果参考:http://www.weatherobserve.com/showInfoIndex.jsp ...

  8. 5分钟上手写ECharts的第一个图表

    网址:http://echarts.baidu.com/doc/start.html 架构特性 http://echarts.baidu.com/doc/feature.html | 架构 提供商业产 ...

  9. ECharts JS应用:图表页面实现

    因为要统计数据进行图表展示,所以就简单学习了 ECharts JS 的应用.它是一个纯Javascript图库,它依赖于一个轻量级的Canvas库 ZRender,并提供直观.生动.交互式和高度可定制 ...

  10. echarts的时间线图表

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

随机推荐

  1. 【Java】EasyCaptcha 封装验证码接口

    依赖坐标: <dependency> <groupId>com.github.whvcse</groupId> <artifactId>easy-cap ...

  2. Google的TPU的向量化内存的读取规格——单次读取/写入的数据量

    异构加速设备: GPU.TPU.NPU 这几种设备,除了GPU公开了部分硬件设计原理和软件编程范式以外,所有的TPU和NPU的资料都是不公开的,都是被其所属公司保留的,然后这些公司会自己在这些硬件之上 ...

  3. MindSpore 框架的官方预训练模型的加载 —— MindSpore / hub 的安装

    MindSpore计算框架提供了一个官方版本的预训练模型存储库,或者叫做官方版本的预训练模型中心库,那就是 MindSpore / hub . 首先我们需要明确概念: 第一个就是 mindspore_ ...

  4. vue之事件监听v-on

    1.背景 2.简单使用 2.1.做一个简单的点击计数器 <!DOCTYPE html> <html lang="en" xmlns:v-on="http ...

  5. 一文搞懂DevOps、DataOps、MLOps、AIOps:所有“Ops”的比较

    引言 近年来,"Ops"一词在 IT 运维领域的使用迅速增加.IT 运维正在向自动化过程转变,以改善客户交付.传统的应用程序开发采用 DevOps 实施持续集成(CI)和持续部署( ...

  6. 基础数据结构->set&&map

    set&&map BEGIN:惜墨如金 set用法 基本用法 #include<bits/stdc++.h> using namespace std; void the_s ...

  7. FFmpeg开发笔记(四十五)使用SRT Streamer开启APP直播推流

    ​SRT Streamer是一个安卓手机端的开源SRT协议直播推流框架,可用于RTMP直播和SRT直播.SRT Streamer支持的视频编码包括H264.H265等等,支持的音频编码包括AAC.OP ...

  8. 15-canvas渐变色

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  9. 在使用Nacos作为统一配置中心的时候,项目中使用@Value注解从Nacos获取值,一直报错Could not resolve placeholder 'blog.website' in value "${blog.website}".如下图:

    在使用Nacos作为统一配置中心的时候,项目中使用@Value注解从Nacos获取值,一直报错Could not resolve placeholder 'blog.website' in value ...

  10. Android RecyclerView 获取当前滚动到的Item项

    背景:RecyclerView  左右滑动时,需要获取当前显示在页面上的选项卡 步骤: 1. RecyclerView  添加addOnScrollListener,回调中可以直接获取对应Item I ...