图表用echart, 然后前端的 HTML 跟 nodejs  , nodejs 去调用 后端PHP的接口

链接:https://www.jianshu.com/p/1f2c37c5c02f

官网:https://echarts.apache.org/examples/zh/index.html#chart-type-pie

1.引入echart库

import * as echarts from 'echarts';

2.初始化echart,找到div的id

 var myChart = echarts.init(document.getElementById('main'));

3.设置option

 var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]

4.将option设置到mychart里面

myChart.setOption(option);

5.渲染插件需要放的地方

 <div id="main" style={{width: '600px', height:'400px'}}></div>

简单入门echart方法的更多相关文章

  1. ECharts.js 超简单入门(本质canvas)

    ECharts.js 超简单入门(本质canvas) 一.总结 一句话总结:echarts这些图标的本质都是canvas. 二.ECharts.js学习(一) 简单入门 EChart.js 简单入门 ...

  2. EChart.js 简单入门

    EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart   这个是Visual Studio里的自带控件,使用比 ...

  3. 数据结构和算法(Golang实现)(4)简单入门Golang-结构体和方法

    结构体和方法 一.值,指针和引用 我们现在有一段程序: package main import "fmt" func main() { // a,b 是一个值 a := 5 b : ...

  4. [原创]MYSQL的简单入门

    MYSQL简单入门: 查询库名称:show databases; information_schema mysql test 2:创建库 create database 库名 DEFAULT CHAR ...

  5. Okio 1.9简单入门

    Okio 1.9简单入门 Okio库是由square公司开发的,补充了java.io和java.nio的不足,更加方便,快速的访问.存储和处理你的数据.而OkHttp的底层也使用该库作为支持. 该库极 ...

  6. 【java开发系列】—— spring简单入门示例

    1 JDK安装 2 Struts2简单入门示例 前言 作为入门级的记录帖,没有过多的技术含量,简单的搭建配置框架而已.这次讲到spring,这个应该是SSH中的重量级框架,它主要包含两个内容:控制反转 ...

  7. Web---演示Servlet的相关类、表单多参数接收、文件上传简单入门

    说明: Servlet的其他相关类: ServletConfig – 代表Servlet的初始化配置参数. ServletContext – 代表整个Web项目. ServletRequest – 代 ...

  8. HTML5简单入门系列(五)

    前言 本篇将讲述HTML5的服务器发送事件(server-sent event) Server-Sent 事件 Server-Sent 事件是单向消息传递,指的是网页自动获取来自服务器的更新. 以前的 ...

  9. Asp.Net MVC3 简单入门第一季(三)详解Controller之Filter

    前言 前面两篇写的比较简单,刚开始写这个系列的时候我面向的对象是刚开始接触Asp.Net MVC的朋友,所以写的尽量简单.所以写的没多少技术含量.把这些技术总结出来,然后一简单的方式让更多的人很好的接 ...

  10. delphi指针简单入门

    delphi指针简单入门:         看一个指针用法的例子:     1         var     2             X,   Y:   Integer;       //   ...

随机推荐

  1. es6中箭头函数和this指向

    箭头函数相当于匿名函数,简化了函数定义. 箭头函数有两种写法,当函数体是单条语句的时候可以省略{}和return. 另一种是包含多条语句,不可以省略{}和return. 特点 箭头函数最大的特点就是没 ...

  2. 元素定位xpath路径中添加参数的方法

    在某次自动化测试中,需要定位下拉列表(非select列表)中不同的元素,我想到了利用参入参数的方式来实现,经过多次尝试,得到如下方法,与大家分享 例如在通过text定位某个元素时,self.find_ ...

  3. 项目实训 DAY14

    今天修改了一下PNN使之可以运行直接生成图片,而不是敲两段命令行.首先是使用python中subprocess启动新进程来达到命令行输命令的效果,即生成xx.pdf:再用os.unlink将中间品删除 ...

  4. 文件上传html

    <html><head> <meta charset="UTF-8"> <title>上传文件测试</title>< ...

  5. AUTO Uninstaller 9.3.28 最新免费密钥绿色版下载【转载】

    大家在使用autodesk系列软件之后,想要彻底卸载清除重新安装却发现无法卸载或者清除不干净的问题,这该怎么办?这里小编就给大家分享一个好用的CAD清理工具AUTO Uninstaller,轻松卸载a ...

  6. Spring Boot 中的异步调用

    通常我们开发的程序都是同步调用的,即程序按照代码的顺序一行一行的逐步往下执行,每一行代码都必须等待上一行代码执行完毕才能开始执行.而异步编程则没有这个限制,代码的调用不再是阻塞的.所以在一些情景下,通 ...

  7. pytorch卷积模块

    nn.Conv2d() 常用的参数有in_channels,out_channels,kernel_size,stride,padding; 除此之外还有参数dilation,groups,bias ...

  8. maven工程入门

    1. 为什么要使用maven? 毕业开始工作,项目组用的maven-spring开发的,不得不了解一下,看过很多介绍,其中maven最大的特点就是 管理jar包和版本管理 (参考:https://ww ...

  9. Windows server 防火墙开放oracle监听端口

    Windows server 防火墙开放oracle监听端口 Windows server 2008 开放1521端口 Windows server 2003 开放监听程序例外先开防火墙,再开监听例外 ...

  10. 如何确保获取的输入为整数-C语言基础

    这一篇探讨的是如何确保你输入的数据是一个整数.虽然标题用的是这个,但我其实真正想要探讨的内容是 "在程序调试的过程中,需要注意把输入缓存区中的上一次输入的残留信息清理干净,以免影响下一次的输 ...