<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- <div id="main" :style="{width: '500px', height: '500px'}"></div> -->
 
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<!-- <script src="customed.js"></script> -->
<script>
// 基于准备好的dom，初始化echarts图表
var dom=document.getElementById('main');
var myChart = echarts.init(dom,'customed');
 
var option = {
tooltip: {
show: true
},
legend: {
data:['销量']
},
xAxis : [
{
type : 'category',
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"销量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
</script>
</body>
</html>

使用HBuilder创建图表的更多相关文章

  1. python使用VBA:Excel创建图表(转)

    # -*- coding: utf-8 -*- """ Created on Thu Mar 06 11:22:03 2014 @author: Administrato ...

  2. Vue 爬坑之路（八）—— 使用 Echarts 创建图表

    在后台管理系统中,图表是一个很普遍的元素.目前常用的图标插件有 charts,  Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件 使用 c ...

  3. C# 在PPT幻灯片中创建图表

    图表能够很直观的表现数据在某个时间段的变化趋势,或者呈现数据的整体和局部之间的相互关系,相较于大篇幅的文本数据,图表更增加了我们分析数据时选择的多样性,是我们挖掘数据背后潜在价值的一种更为有效地方式. ...

  4. Vue怎么使用Echarts创建图表

    摘要:在后台管理系统中,我们经常会遇到图表,比如说:柱形图,饼状图,折线图,雷达图等等,而用来写图表插件有很多,我这里主要介绍Echarts在项目里怎么使用,官网地址如下:https://echart ...

  5. 【mui webAPP】HBuilder创建的iOS平台设置沉浸式状态栏

    应用占用全屏区域,而系统状态栏需要预留出系统状态栏高度. HBuilder创建的应用默认不使用沉浸式状态栏样式,需要进行如下配置开启:打开应用的manifest.json文件,切换到代码视图,在plu ...

  6. Unity可视化数据：创建图表

    本文由Aoi翻译,转载请注明出处.文章来自于catlikecoding,原文作者介绍了Unity制作图表.可视化数据的方法.更多的名词解释内容,请点击末尾的“原文链接”查看.   介绍 这个教程里,我 ...

  7. 【译】用 React 和 D3 创建图表

    本文翻译自:https://dzone.com/articles/charts-with-modern-react-and-d3 本文将介绍如何利用 D3JS 和 ReactJS 来创建基础图表. R ...

  8. Qt QChart 创建图表

    Qt QChart 创建图表 @ 目录 Qt QChart 创建图表 效果 流程 代码 1. 饼图 2. 柱图 3. 折/曲线图 4. 区域图 效果 流程 graph LR q(value 数据) q ...

  9. python中用xlsxwriter创建图表

    缺点:xlsxwriter不能对已存在的Excel进行编辑插入图标   生成图标需要: 1.先准备数据 2.将数据插入到excel中 3.根据插入的数据生成图表 这里的生成excel主要分为准备多维数 ...

随机推荐

  1. anroid学习笔记（1）

    大概是2个月前,报名了慕课的android就业班课程. 算是补全了当初博客分类的最初设计. 安卓和前端比较: 1,java在安卓开发中的作用,现在我的认识是和JavaScript在前端web开发中有很 ...

  2. Android RecyclerView与ListView比较

    RecyclerView 概述 RecyclerView 集成自 ViewGroup .RecyclerView是Android-support-V7版本中新增的一个Widgets,官方对于它的介绍是 ...

  3. yum源安装mysql数据库 添加密码

    学习mysql数据库时,安装的问题一直很烦恼,linux的不同版本的安装方式都可能不同,这里是我学习时的一些总结.也是刚刚开始学习,大佬勿喷,谢谢啦!!! 1.查看是否已经安装 2.如果没安装 yum ...

  4. C实现通讯录管理系统（亮点：纯链表实现、子串匹配，文件读写）

    题目:通讯录管理程序 问题描述 编写一个简单的通讯录管理程序.通讯录记录有姓名,地址(省.市(县).街道),电话号码,邮政编码等四项. 基本要求 程序应提供的基本基本管理功能有: 1) 添加:即增加一 ...

  5. flutter textfield设置高度后内容区无法居中？

    textfiled 设置高度后,内容永远无法居中,最后找到原因 decoration: 中有一个 contentPadding属性,设置这个属性对应的Padding值即可

  6. Delphi让控件随着窗口的大小而改变

    Delphi让控件随着窗口的大小而改变方法1:设置Anchors属性,把akLeft,akTop,akRight,akBottom都设为True.方法2:设置Align属性,其值为alClient.

  7. golang实现四种排序(快速，冒泡，插入，选择)

    本文系转载 原文地址: http://www.limerence2017.com/2019/06/29/golang07/ 前面已经介绍golang基本的语法和容器了,这一篇文章用golang实现四种 ...

  8. Jenkins 有用的API

    /quietDown: Put Jenkins in a Quiet mode, in preparation for a restart. In that mode Jenkins don’t st ...

  9. input.validity

    HTML5为表单提供了自带的输入规则提示 但是实际开发中,我们往往需要自定义提示消息和规则,例如限定了最大值但不要求超出时提示错误信息,这时便用到了H5提供的表单新的JS属性--validity,它是 ...

  10. Python3 Selenium自动化web测试 ==> 第二节 页面元素的定位方法 <上>

    前置步骤: 上一篇的Python单元测试框架unittest,我认为相当于功能测试测试用例设计中的用例模板,在自动化用例的设计过程中,可以封装一个模板,在新建用例的时候,把需要测试的步骤添加上去即可: ...