简单入门echart方法
图表用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方法的更多相关文章
- ECharts.js 超简单入门(本质canvas)
ECharts.js 超简单入门(本质canvas) 一.总结 一句话总结:echarts这些图标的本质都是canvas. 二.ECharts.js学习(一) 简单入门 EChart.js 简单入门 ...
- EChart.js 简单入门
EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比 ...
- 数据结构和算法(Golang实现)(4)简单入门Golang-结构体和方法
结构体和方法 一.值,指针和引用 我们现在有一段程序: package main import "fmt" func main() { // a,b 是一个值 a := 5 b : ...
- [原创]MYSQL的简单入门
MYSQL简单入门: 查询库名称:show databases; information_schema mysql test 2:创建库 create database 库名 DEFAULT CHAR ...
- Okio 1.9简单入门
Okio 1.9简单入门 Okio库是由square公司开发的,补充了java.io和java.nio的不足,更加方便,快速的访问.存储和处理你的数据.而OkHttp的底层也使用该库作为支持. 该库极 ...
- 【java开发系列】—— spring简单入门示例
1 JDK安装 2 Struts2简单入门示例 前言 作为入门级的记录帖,没有过多的技术含量,简单的搭建配置框架而已.这次讲到spring,这个应该是SSH中的重量级框架,它主要包含两个内容:控制反转 ...
- Web---演示Servlet的相关类、表单多参数接收、文件上传简单入门
说明: Servlet的其他相关类: ServletConfig – 代表Servlet的初始化配置参数. ServletContext – 代表整个Web项目. ServletRequest – 代 ...
- HTML5简单入门系列(五)
前言 本篇将讲述HTML5的服务器发送事件(server-sent event) Server-Sent 事件 Server-Sent 事件是单向消息传递,指的是网页自动获取来自服务器的更新. 以前的 ...
- Asp.Net MVC3 简单入门第一季(三)详解Controller之Filter
前言 前面两篇写的比较简单,刚开始写这个系列的时候我面向的对象是刚开始接触Asp.Net MVC的朋友,所以写的尽量简单.所以写的没多少技术含量.把这些技术总结出来,然后一简单的方式让更多的人很好的接 ...
- delphi指针简单入门
delphi指针简单入门: 看一个指针用法的例子: 1 var 2 X, Y: Integer; // ...
随机推荐
- 基础vue的一些知识补充
一.:disabled 该属性能接受布尔值,可以用于元素的使用.当值为true时,该元素将无法被使用,如button的disabled属性被设置为true后,将无法被点击,input的disabled ...
- Unit Test下使用H2内存数据库
1.Maven引入包 <dependency> <groupId>com.h2database</groupId> <artifactId>h2< ...
- 常用的CSS效果(1)
单行省略 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 多行省略 display:-webkit-box; overf ...
- Vue实现组件化的基本思路
Vue.js(以下简称Vue)是时下流行的前端开发库,一般搭配其插件Vue-Router,Vuex一起使用,行业中称为Vue全家桶. Vue使用了MVVM的理念,将表现层(DOM)和数据层进行了分离, ...
- uniapp调起微信支付查询订单状态逻辑处理
首先看页面效果: <template> <view class="page"> <view class="page-bd"> ...
- LOJ数列分块入门九题(上)
一转眼,已经有整整一年没有在博客园写博客了.去洛谷写了几篇(How time flys. 最近突然想起其实我不太擅长分块算法,又想起去年暑假有位同学同我提起过LOJ的数列分块九题,说来惭愧,打了这么久 ...
- java从键盘输入数据
一.从键盘输入字符串 1.nex和nextLine的区别 next()读取到有效字符后才可以结束输入,对输入有效字符之前遇到的空格键.Enter键或Tab键等结束符,next()会自动将其去掉,只有在 ...
- oracle导入dmp
通过impdp导入 1.sqlplus (连接oracle数据库) 2.输入用户名密码3.create user abc identified by 123456; (创建用户名为ab ...
- uni-app 小程序在iOS系统无法长按复制问题
最近在使用uni-app开发移动端应用,有客户反映微信小程序版本在使用是无法长按复制问题,在安卓系统上却是正常的. 检查了下代码,对text标签都设置了selectable属性,寻找万能的度娘还是没有 ...
- Linux CentOS Docker 安装、加载配置
Docker Version:2.10.2 OS: CentOS 7 1.卸载 $ sudo yum remove docker \ docker-client \ docker-client-lat ...