echart 库 初始
一、echart简介
（注：一定要将容器放在js代码前面，[我也是经过实践后发现的]）
1、代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="js/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100%;height:450px;"></div>
</body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据
var option = {
barWidth:30,//条形的宽的为30
tooltip: {},
legend: {//说明
//orient: 'vertical', //说明显示在的位置所在
// center: 'center ',//说明的位置居中显示 默认居中横排显示
data:['期中', '期末'],//数据说明
bottom: 'bottom',
},
xAxis: {//X轴上的内容
type : 'category',
axisLabel:{
//横坐标上的文字斜着显示 文字颜色 begin
interval:0,
rotate:45,
margin:10,
textStyle:{color:"#ec6869" }
//横坐标上的文字换行显示 文字颜色end
},
type : 'category',
data: ["语文","数学","英语","物理","化学"]
},
yAxis: {//Y轴上的内容
type : 'value'
},
title:{
text: '霸下',//主标题文本，'\n'指定换行
subtext: '2019年秋 实验中学学生成绩 ',
left: 'center',
},
series: [
//第一条数据 begin
{
type: 'bar',//Echart 柱状图（bar）
name:'期中',
data: [60, 70, 55, 33, 12],
//柱状条颜色的设置为#eb6768 begin
itemStyle: {
normal: {
color: '#eb6768',
shadowBlur: 2,
shadowColor: 'rgba(3, 3, 4, 0.5)'
}
}
//柱状条颜色的设置为#eb6768 end
},
//第一条数据 end
//第二条数据 begin
{
type: 'bar',
name:'期末',
data: [63, 65, 35, 18, 24],
//柱状条颜色的设置为#eb6768 begin
itemStyle: {
normal: {
color: '#3b8ede',
shadowBlur: 2,
shadowColor: 'rgba(3, 3, 4, 0.5)'
}
}
//柱状条颜色的设置为#eb6768 end
}
//第二条数据 end
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>
2、效果
echart 库 初始的更多相关文章
- echart初体验 动态加载数据
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- vue 使用 echart ，自定义样式案例
1.vue 安装 echart 库 npm install echarts --save 2.vue代码 引入 let echarts = require("echarts/lib/echa ...
- TortoiseSVN安装使用（转）
TortoiseSVN是windows平台下Subversion的免费开源客户端. 一般我们都是先讲讲服务器的配置,然后再讲客户端的使用,但是在TortoiseSVN上,却可以反过来.因为,如果你的要 ...
- TortoiseSVN安装使用
TortoiseSVN是windows平台下Subversion的免费开源客户端. 一般我们都是先讲讲服务器的配置,然后再讲客户端的使用,但是在TortoiseSVN上,却可以反过来.因为,如果你的要 ...
- 【Vegas原创】SVN的搭建及安装使用
中文手册:http://tortoisesvn.net/docs/nightly/TortoiseSVN_zh_CN/index.html 所需程序: 1,TortoiseSVN http://so ...
- git 创建branch分支
开发者user1 负责用getopt 进行命令解析的功能,因为这个功能用到getopt 函数,于是将这个分支命名为user1/getopt.(1)确保是在开发者user1的工作区中cd /home/j ...
- SVN使用（二）
TortoiseSVN是windows平台下Subversion的免费开源客户端. 一般我们都是先讲讲服务器的配置,然后再讲客户端的使用,但是在TortoiseSVN上,却可以反过来.因为,如果你的要 ...
- git 创建branch分支【转】
转自:http://www.cnblogs.com/jackluo/p/3499731.html 开发者user1 负责用getopt 进行命令解析的功能,因为这个功能用到getopt 函数,于是将这 ...
- TortoiseSVN是windows平台下Subversion的免费开源客户端。
一般我们都是先讲讲服务器的配置,然后再讲客户端的使用,但是在TortoiseSVN上,却可以反过来.因为,如果你的要求不高,只是想在本机,或者是可信任的局域网络中使用SVN版本控制,可以不需要安装SV ...
随机推荐
- 在自定义的widget中引入图表后，运行时出现TypeError #1009错误
本人网上查找了很多资料,其中大部分都是关于Flash中的动画效果问题,与这里的问题关系型不太大.故把问题的解决方法写在这里,与人方便,与己方便. 方法一: 1.在自定义的widget中添加如下两个方法 ...
- 一个高级PHP工程师所应该具备的(转自元如枫博客)
初次接触PHP,就为他的美所折服,于是一发不可收拾. 很多面试,很多人员能力要求都有“PHP高级工程师的字眼”,如果您真心喜欢PHP,并且您刚起步,那么我简单说说一个PHP高级工程师所应该具备的,希望 ...
- CSS三列自适应布局（两边宽度固定，中间自适应）
https://blog.csdn.net/cinderella_hou/article/details/52156333 https://blog.csdn.net/wangchengiii/art ...
- 2.1 MySQL基础使用
本文是课上资料的总结非原创没有转载地址 目录 引言 为什么需要数据库? 数据库和应用程序的关系 MySQL基础使用 一.数据库简介 1.1 简介 1.2 常见数据库管理系统 1.3 MySQL卸载 1 ...
- Python 爬取 热词并进行分类数据分析-[数据修复]
日期:2020.02.01 博客期:140 星期六 [本博客的代码如若要使用,请在下方评论区留言,之后再用(就是跟我说一声)] 所有相关跳转: a.[简单准备] b.[云图制作+数据导入] c.[拓扑 ...
- 在 ubuntu 中安装python虚拟环境
直接看命令一路操作(注:python3 下): 1.安装虚拟环境: sudo pip3 install virtualenv 2.安装虚拟环境扩展管理工具: sudo pip3 install vir ...
- ubuntu13.10设置永久静态IP重启不失效
步骤: 1.vi打开/etc/network/interfaces 2.手动添加static ip address 3.:wq保存退出 4.重启网络 service network-manager r ...
- 服务器settings
1,如果增加了一个新的APP, 那么需要在服务器上 vim settings文件进行修改, 修改方法 i, :wq 2,正式服务器需要一样的操作
- 四 Spring的工厂类，xml的配置
Spring工厂类的结构图: BeanFactory:老版本的工厂类 BeanFactory:调用getBean的时候,才会生产类的实例 ApplicationFactory:新版本的工厂类 加载配置 ...
- Spring Boot 概括
Spring Boot 简介 简化Spring应用开发的一个框架: 整个Spring技术栈的一个大整合: J2EE开发的一站式解决方案: 微服务 2014,martin fowler 微服务:架构风格 ...