<!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. Selenium chromeDriver 下载地址

    http://chromedriver.storage.googleapis.com/ http://npm.taobao.org/mirrors/chromedriver/

  2. OpenStack 高性能虚拟机之大页内存

    目录 文章目录 目录 前文列表 虚拟存储器系统 页式虚拟存储器 大页内存 Linux 的大页内存 大页的实现原理 大页内存配置 透明巨型页 THP 大页面对内存的影响 Nova 虚拟机的大页内存设置 ...

  3. Jmeter实现简单web负载测试

    Jmeter实现简单web负载测试 简介 Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测试领域. ...

  4. Jmeter之Cookie和Session处理

    Jmeter之Cookie和Session处理 1.Cookie 添加方式:线程组-配置元件-HTTP Cookie 管理器,如下图: 2.Session 添加方式:线程组-前置处理器 -HTTP U ...

  5. 2019.11.10【每天学点SAP小知识】Day3 - ABAP 7.40新语法 值转化和值赋值

    1.语法为 CONV dTYPE|#(...)\ # 代表任意类型 "7.40之前表达式 . DATA helper TYPE string. DATA xstr TYPE xstring. ...

  6. python导入csv文件出现SyntaxError问题分析

    python导入csv文件出现SyntaxError问题分析 先简单描述下碰到的题目,要求是写出2个print的结果 可以看到,a指向了一个列表list对象,在Python中,这样的赋值语句,其实内部 ...

  7. if、elif 条件判断

    #!/usr/bin/python #-*- codinig: UTF-8 -*- from __future__ import print_function import os, sys, stat ...

  8. Linux 使用中history 默认记录数不够用了？

    1.默认情况下,系统能保存1000条的历史命令. #echo $HISTSIZE   2.那么1000条不够用,该怎么办呢? #vi /etc/profile 修改HISTSIZE=1000 > ...

  9. SQL 批量添加的语法

    .--添加一条记录 . insert into tableName(col1,col2,col3) values (val1,val2,val3) .--添加多条记录 . insert into ta ...

  10. elasticsearch的cross_fields查询

    1.most_fields 这种方式搜索也存在某些问题 它不能使用 operator 或 minimum_should_match 参数来降低次相关结果造成的长尾效应. 2.词 peter 和 smi ...