1.上传echarts的js文件
echarts 使用时,需要引入“echarts.min.js”文件,而如果有 echarts 地图的话,还要引入“china.js”文件。
在 Browse Files 中,先新建一个 js 文件夹,然后,通过 upload 来上传 “echarts.min.js” 和“china.js”文件到 Server 中。
如图:
创建js 文件夹 然后进行导入
新建看板,引入资源
新建一个看板,并保存,之后点击“setting”来设置此看板引入 js 的方式,去掉 使用 requireJS support 的勾选(重要)。
如果勾选的话,引入的js文件将是通过 requireJS 来加载的,当引入 china.js 时,会有问题,因此这里不使用此方式引入js
而是 使用 <script></script>标签的形式来引入。
并通过“添加资源”按钮,资源类型选择“Javascript”,来源选择“External File”,点击“OK”
<div id='container' style='width:100%;height:600px'>loading...</div>
这里就能看见之前导入的js
切记:
需要将其自己样式位置放在 最下面,因为js脚本是从上到下执行的。
设置属性:
name:myjs
resource code为:
function chartSet(ele,option){
var dom = document.getElementById(ele);
var myChart = echarts.init(dom);
var app = {};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}
function getBarOption(){
return {
title: {
left: 'center',
text: '',
textStyle:{
color:'#fff'
}
},
tooltip: {
trigger: 'axis',
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel:{
rotate:45,
color:'#fff',
fontSize :8
},
splitLine : {
show:false
}
},
yAxis: {
type: 'value',
axisLabel:{
rotate:45,
color:'#fff',
fontSize :8
},
splitLine : {
show:false
}
},
series: [{
center: ['55%', '40%'],
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
show:true,
label:{
rotate:90
}
}]
};
}
function initChart1(){
var option = getBarOption();
option.title.text='订单量 top 10';
chartSet('container',option);
}
function init(){
initChart1();
}
$(function(){
init();
});
设置好之后,点击预览
以上是我修改过后 查数据库的结构
需要用sql 展示 需要如下
由于第一节已经细讲这就不详细讲 第一节
定义表
连接数据库配置
修改引入js
那么问题来了 获取路径哪里来 result 如何获取的值
由于之前配置数据连接 配置了table组件 这时候
进入点击preview
选择数据库名称,点击Qusery URL 获取链接
执行以上js 修改 预览 实现使用Echarts