echart多个数据表联合？_教程

<! DOCTYPE html>

<head >

<title >ECharts</ title >

</ head >

<body >

// 路径配置

require.config({

paths: {

echarts: 'http://echarts.baidu.com/build/dist'

}

})

// 使用

require(

[

'echarts',

'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载

'echarts/chart/line'

function (ec) {

// 基于准备好的dom，初始化echarts图表

var myChart1 = ec.init(document.getElementById('main1'))

var myChart2 = ec.init(document.getElementById('main2'))

var myChart3 = ec.init(document.getElementById('main3'))

var myChart4 = ec.init(document.getElementById('main4'))

myChart1.setTheme("macarons")

myChart2.setTheme("macarons")

myChart3.setTheme("macarons")

myChart4.setTheme("macarons")

var option1 = {

title : {

text: '温度状况',

subtext: '纯属虚构'

tooltip : {

trigger: 'axis'

legend: {

data:['设定温度','进水温度','出水温度','埋缓环境温度']

toolbox: {

show : true,

feature : {

mark : {show: true},

dataView : {show: true, readOnly: false},

magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},

restore : {show: true},

saveAsImage : {show: true}

}

xAxis : [

{

type : 'category', //x轴为类目类型

axisLabel:{

show:true,

interval:0,

rotate:45

data : ['00:00:00','00:05:00','00:10:00','00:15:00','00:20:00','00:25:00','00:30:00','00:35:00','00:40:00','00:45:00']

}],

yAxis : [

{

type : 'value' //y轴为值类型

}

series : [{

name:'设定温度',

type:'line',

smooth:true,

data:[55,55,55,55,55,55,55,55,55,55]

}]

1、在echarts官网下载包，解压后，将文件Echarts\echarts-2.2.7\echarts-2.2.7\doc\example\www\js\echarts.js文件拷贝，放到eclipse中。

2、创建jsp页面即可

注意：1）红色表示是框架，换不同的样式也不用动的

2）option是换样式的，如柱状图等等，具体代码参考百度官网

3）本例中的x值是控制上图中左侧文字前慧与左边的距离大小

4）需要在body中给其一个容器。

<%@ page contentType="text/htmlcharset=UTF-8" %>

<%@ include file="/WEB-INF/views/include/taglib.jsp"%>

<%@ page language="java" import="java.util.*,java.lang.*" pageEncoding="UTF-8"%>

<html>

<head>

// 路径配置

require.config({

paths: {

// echarts: 'http://echarts.baidu.com/build/dist'

echarts: '${ctxStatic }/js/build/dist'

}

})

// 使用

require(

[

'echarts',

'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载

function (ec) {

// 基于准备好的dom，初始化echarts图表

var myChart = ec.init(document.getElementById('main'))

option = {

tooltip: {

trigger: 'item',

formatter: "{a} <br/>{b}: {c} ({d}%)"

legend: {

orient: 'vertical',

x: '40px',

data:['指令发布','案件讨论','每日警情','每周警情','信息共享','日常互助','考核通报','前科重点人员','高危人员','刑嫌人员','在逃相对关系人','在逃人员','DNA比中分析','银联司法','电信诈骗串并','视频串并','协同办案','以案查物','以物查案（手机分析）','以物查案（电脑分析）','以物查案（贵重物品分析）','以物查案（车辆分析）']

series: [

{

name:'信息来源',

type:'pie',

selectedMode: 'single',

radius: [0, '25%'],

label: {

normal: {

position: 'inner'

}

labelLine: {

normal: {

show: false

}

data:[

//{value:${xtdl}, name:'系统登录', selected:true},

{value:${zl+tl+mr+mz}, name:'合成作战'},

{value:${xx+khtb+rchz}, name:'互助专栏'},

{value:${qkzd+gwry+xxry+ztxd+ztry+dnabz}, name:'人员分析'},

{value:${jass+dxzp+vod+xtba}, name:'串并案分析'},

{value:${yacw+sjfx+dnfx+gzwp+clfx}, name:'物品分析'}

]

{

name:'信息来源',

type:'pie',

radius: ['30%', '55%'],

data:[

{value:${zl}, name:'指令发布'},

{value:${tl}, name:'案件讨论'},

{value:${mr}, name:'每日警情'},

{value:${mz}, name:'每周警情'},

{value:${xx}, name:'信息共享'},

{value:${rchz}, name:'日常互助'},

{value:${khtb}, name:'考核通报'},

{value:${qkzd}, name:'前科重点人员'},

{value:${gwry}, name:'高危人员'},

{value:${xxry}, name:'刑嫌人员'},

{value:${ztxd}, name:'在逃相对关系人'},

{value:${ztry}, name:'在逃人员'},

// {value:${xtdl}, name:'系统登录'},

{value:${dnabz}, name:'DNA比中分析'},

{value:${jass}, name:'银联司法'},

{value:${dxzp}, name:'电信诈骗串并'},

{value:${vod}, name:'视频串并'},

{value:${xtba}, name:'协同办案'},

{value:${yacw}, name:'以案查物'},

{value:${sjfx}, name:'以物查案（手机分析）'},

{value:${dnfx}, name:'以物查案（电脑分析）'},

{value:${gzwp}, name:'以物查案（贵重物品分析）'},

{value:${clfx}, name:'以物查案（车辆分析）'}

]

}

]

}

// 为echarts对象加载数据

myChart.setOption(option)

}

)

</script>

</head>

<body>

</ul>

<form:form id="searchForm" modelAttribute="bean" action="${ctx}/sys/log/view" method="post" class="breadcrumb form-search">

<b>重点模块访问数据统计[系统总登录次数：<span style="color:green">${xtdl}</span>]</b>

</form:form>

</body>

</html>

echarts 2.1.8 模块化单文件引入map报错，请问怎么处理

以上各项可用光标键移动色棒进行选择, 回车则执行。也可用每一项的第一个大写字母直接选择。若要退到主菜单或从它的下一级菜单列表框退回均可用Esc键, Turbo C 2.0所有菜单均采用这种方法进行 *** 作, 以下不再说明。

1.13.4 Edit菜单

按Alt+E可进入编辑菜单, 若再回车, 则光标出现在编辑窗口, 此时用户可以进行文本迹告编辑。编辑方法基本与wordstar相同, 可用F1键获得有关编辑方法的帮助信息。

1. 与编辑有关的功能键如下:

F1 获得Turbo C 2.0编辑命令的帮助信息；

F5 扩大编辑窗口到整个屏幕；

F6 在编辑窗口与信息窗口之间进行切换；

F10 从编辑窗口转到主菜单。

2. 编辑命令简介:

PageUp向前翻页

PageDn向后翻页

Home 将光标移到所在行的开始

End 将光标移到所在行的结尾

Ctrl+Y删除光标所在的一行

Ctrl+T删除光标所在处的一个词

Ctrl+KB 设置块开始

Ctrl+KK 设置块结尾

Ctrl+KV 块移动

Ctrl+KC 块拷贝

Ctrl+KY 块删除

Ctrl+KR 读文件

Ctrl+KW 存文件

Ctrl+KP 块文件打印

Ctrl+F1 如果尺州纤光标所陵仿在处为Turbo C 2.0库函数, 则获得有关该函数的帮助信息

Ctrl+Q[ 查找Turbo C 2.0双界符的后匹配符

Ctrl+Q] 查找Turbo C 2.0双界符的前匹配符

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/tougao/12289907.html

echart多个数据表联合？

发表评论

评论列表（0条）