<!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. jstack+jdb命令查看线程及死锁堆栈信息

    如果程序挂死,有时使用jstack查看进程中线程信息时,需要添加上-F参数,此时如果有死锁信息,则可能不会打印出死锁堆栈信息,使用jdb则可以查看当前死锁线程的运行堆栈. 如下模拟一个简单的死锁程序 ...

  2. Mac/Linux 编译安装redis

    一.下载安装 官网http://redis.io/ 下载最新的稳定版本,这里是3.2.0 sudu mv redis-.tar /usr/local/ sudo tar -zxf redis-.tar ...

  3. 【React自制全家桶】六、React性能优化（持续更新总结）

    一.通过虚拟DOM来提升性能(自动) 底层讲解见[React自制全家桶]二.分析React的虚拟DOM和Diff算法   二.将多次setState合并为一次执行(自动) 底层讲解见[React自制全 ...

  4. java集合(List,Set,Map)详细总结

    一,集合的由来: 数组是长度是固定的,当添加的元素超过数组的长度时需要对数组重新定义,太麻烦了,java内部给我们提供了集合类,能存储任意对象,长度是可以改变的,随着元素的增加而增加,随着元素的减少而 ...

  5. log4j日志配置文件

    log4j.properties: ### 设置### log4j.rootLogger = debug,stdout,D,E ### 输出信息到控制抬 ### log4j.appender.stdo ...

  6. Swift3.0基础语法学习<一>

    // // ViewController.swift // SwiftBasicDemo // // Created by 思 彭 on 16/11/15. // Copyright © 2016年 ...

  7. ubuntu install themes && use it

    one step: I am going to show you the installation of a theme with Numix theme and Unity Tweak Tool. ...

  8. DirectX* 11 多线程渲染的性能、方法和实践

    对于在 CPU 上运行的 PC 游戏,渲染通常是主要的性能瓶颈:多线程渲染是一种消除瓶颈的有效方法.本文研究了 DirectX* 11 多线程渲染的性能可扩展性,讨论了多线程渲染的两种基本方法,并介绍 ...

  9. oracle_协议适配器错误_协议适配器不可加载_TNS监听程序在connect-data中未获得service-name

    最近在使用powerdesigner连接远程oracle进行反向工程操作时,出现了一些问题,这些问题很普遍,大多是由于配置引起的 说明:(1)远程数据库版本问 oracle11g 64bit (2)本 ...

  10. Flume概述

    flume是分布式的,可靠的,用于从不同的来源有效收集 聚集 和 移动 大量的日志数据用以集中式的数据存储的系统. 是apache的一个顶级项目. 系统需求:jdk1.6以上,推荐java1.7