ECharts-条形图制作


@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/echarts.min.js"></script>
<title>Echarts</title>
</head>
<body>
<div id="main" style="width: 900px;height:400px;"></div>

<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById(‘main‘));

// 指定图表的配置项和数据
var option = {
title: {
text: ‘ECharts 入门示例‘
},
tooltip: {},
legend: {
data:[‘订单数‘,‘销售额‘]
},
xAxis: {
data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},
yAxis: [
{
name: ‘订单数‘,
type: ‘value‘,
max: 60,
min: 0,
scale:true,
},
{
name: ‘销售额(万元)‘,
//nameLocation: ‘start‘,
scale:true,
max: 60,
min:0,
type: ‘value‘,

}
],
series: [{
name: ‘订单数‘,
type: ‘line‘,
label: {
normal: {
show: true,
position: ‘top‘
}
},
//areaStyle: { normal: {} },

data: [5, 20, 26, 10, 10, 20,15,21,9,14,19,26]
},
{
name: ‘销售额‘,
type: ‘line‘,

yAxisIndex: 1,//使销售额受右边Y轴控制

label: {
normal: {
show: true,
position: ‘top‘
}
},
//areaStyle: { normal: {} },

data: [20,36,40,30,28,38,42,50,39,29,34,40]
}]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>

时间: 2025-01-12 03:29:55

ECharts-条形图制作的相关文章

使用echarts简单制作中国地图

网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字,添加hover事件,将对应图片显示. 第二种方法: 使用图形插件echarts,轻松制作. http://echarts.baidu.com/doc/example.html在echarts网站上下载文件包 echarts使用方法查看页面 http://echarts.baidu.com/doc/d

基于echarts组件制作数据可视化大屏

什么是数据可视化:数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息.在实际工作中,数据分析能够帮助管理者进行判断和决策,以便采取适当策略与行动. 数据可视化分析有什么作用:1.现状分析告诉你过去发生了什么,告诉你企业现阶段的整体运营情况,通过各个经营指标的完成情况来衡量企业的运营状态,以说明企业整体运营是更好了还是坏了,好的程度是如何,坏的程度又到哪里. 2.原因分析告诉你某一现状为什么发生,经过第一阶段的现状分析,我们对企业的运营情况有了一个基本的了解,但是不知道运营情况具体好在哪

echarts报表制作

 最近项目需求,要实现柱状图.饼状图和折线图的报表.使用的是百度开发的echarts,大体使用步骤如下: 一.使用方式 1.引入下载的echarts的js文件,在http://echarts.baidu.com/链接可以下载,而且有API和实例的展示. 2.在页面中,通过div来设置一个固定宽和高的区域块,用来展示报表用.如: <div id="synchronism" style="width:100%;height:400px"></div&g

学生管理系统(layUI Echarts)

这周学习了 UI框架  可以大大减少我们网页设计的工作量 在layui的官网中 都有很多好看的样式 和一些 数据表格 只需要我们稍加修改即可使用 还需要下载layui官网的 相关文件 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content=&

echarts创建图表

Echarts是一个图表插件,可以用在做一些统计图 如:折线图 还有柱状图 我们在工作中有时会用到图表来展示数据 我们一起来学学echarts这个图表插件吧^_^ 第一步:下载插件包 下载地址:http://echarts.baidu.com/index.html 下载好后,我们就来开始使用这个插件了 第二步:创建html文档并引入插件的文件 第三步:创建容器,并设置高度 第四步:在新建一个script用来写js代码 第五步:配置文件包的路径(因为后面要使用包里的东西,所以需要先设置路径) 现在

Echarts后台option对象

最近在工作中使用到了Echarts来制作图表,在网上搜了好多例子几乎都是千篇一律的在前台写死一些js,然后把变量通过ajax或者遍历集合的方式插进去,这样子一旦某一页面的图表一多,就会异常混乱,偶然在开源中国看到有人做成了个Echarts对象的jar包,在后台进行完美封装传回一个option在前台接收了并set进option即可.试了试,效果非常好. 下面给出例子代码: 该方法返回的keyword指向了前台负责图表显示的jsp页面 public String keyword() { if(thi

Java处理文件小例子--获取全国所有城市的坐标

需求:前端展示数据,全国城市的坐标 这个是 echarts 的 制作地图JSON 工具, 但是没有全国的,只有各个省 前端需要的数据:    所以现在 下载所有的省数据: 然后是Java处理. 这是这里重点, 在开发中, 很多繁琐的事 ,我们都可以用程序来控制: package cn.ycmedia.common.utils; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; i

echarts &nbsp; js 模板制作 地图 案例分享

今天分享一个 echarts   js 模板制作 地图 案例,有类似需求的筒子可以参考 O(∩_∩)O 需求:因为最近管理的全国各地代理服务器越来越多,有时上级需要看下我们的代理分布,比如带宽,比如供应商,如果用纯excel不是很直观,就套用了前端的Js模板,修改了些代码,填充部分值进去,就出来基本效果了. 上效果图: 基本上把全国各地的资源情况很直观的显示出来了,这里只填充了部分值,后期会将值存入mysql,并且用上ajax 来塞值,这里就列个基本的效果图. 5分钟上手echarts,官网教程

Echarts生成饼状图、条形图以及线形图 JS封装

1.在我们开发程序中,经常会用到生成一些报表,比方说饼状图,条形图,折线图等.不多说了,直接上封装好的代码,如下Echarts.js所示 以下代码是封装在Echarts.js文件中 /** * Created by Administrator on 2015/8/7. */ var charec; // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 按需加载所需图表 r

ECharts系列 - 柱状图(条形图)实例一

ECharts主页:  http://echarts.baidu.com/index.html ECharts-2.1.8下载地址:  http://echarts.baidu.com/build/echarts-2.1.8.zip ECharts官方实例:  http://echarts.baidu.com/doc/example.html ECharts官方API文档:  http://echarts.baidu.com/doc/doc.html ECharts系列 - 柱状图(条形图)实例