加载属性对象
~~~
{
name: "",
type: "kline",
coverImage: contextPath + "/images/componenttypes/" + locale + "/echarts/zh_line.png",
coverImageWidth: a,
tip: "K线图"
}
~~~
添加k线图模板
~~~
// K线图初始化数据
var k = [["LG",5499.0,6499.0,5499.0,6499.0,5999.0,2,72.0],["TCL",769.0,2499.0,769.0,2499.0,1694.71,7,8461.0],["七星",638.0,638.0,638.0,638.0,638.0,1,55.0],["万宝",558.0,1049.0,558.0,1049.0,790.8,5,1447.0],["三星",2399.0,6499.0,2399.0,6499.0,4161.5,8,1291.0],["上菱",759.0,1699.0,759.0,1699.0,1131.5,4,241.0],["先科",399.0,549.0,399.0,549.0,482.0,3,532.0],["创维",849.0,2299.0,849.0,2299.0,1540.0,9,3887.0],["华日电器",769.0,999.0,769.0,999.0,884.0,2,120.0],["博世",2490.0,12830.0,2490.0,12830.0,5995.0,6,388.0],["卡萨帝",6999.0,8999.0,6999.0,8999.0,7999.0,2,126.0],["双鹿",599.0,1029.0,599.0,1029.0,796.5,4,1169.0],["哈士奇",996.0,8799.0,996.0,8799.0,2254.22,9,758.0],["奥克斯",699.0,2599.0,699.0,2599.0,1649.0,2,309.0],["奥马",499.0,2999.0,499.0,2999.0,1913.29,7,2679.0],["容声",958.0,5699.0,958.0,5699.0,2649.9,20,21814.0],["富信",339.0,439.0,339.0,439.0,382.333,3,810.0],["尊贵",2299.0,2988.0,2299.0,2988.0,2695.33,3,323.0],["小天鹅",1099.0,1099.0,1099.0,1099.0,1099.0,1,114.0],["康佳",698.0,2598.0,698.0,2598.0,1486.38,16,13779.0],["德努希",1698.0,3799.0,1698.0,3799.0,2965.33,3,125.0],["志高",438.0,639.0,438.0,639.0,538.5,2,119.0],["扎努西・伊莱克斯",1149.0,1149.0,1149.0,1149.0,1149.0,1,71.0],["扬佳",518.0,638.0,518.0,638.0,558.0,3,467.0],["新飞",799.0,2999.0,799.0,2999.0,1726.18,11,2014.0],["晶弘",749.0,3999.0,749.0,3999.0,2365.67,9,1648.0],["松下",3490.0,7590.0,3490.0,7590.0,4710.0,5,830.0],["樱花",538.0,699.0,538.0,699.0,598.143,7,2595.0],["欧立",419.0,599.0,419.0,599.0,509.0,2,290.0],["海信",559.0,4299.0,559.0,4299.0,2380.18,17,6639.0],["海尔",649.0,7399.0,649.0,7399.0,2816.61,38,41402.0],["海浪",508.0,658.0,508.0,658.0,583.0,2,209.0],["熊猫",538.0,1180.0,538.0,1180.0,766.833,6,6301.0],["索伊",589.0,589.0,589.0,589.0,589.0,1,285.0],["统帅",719.0,3399.0,719.0,3399.0,2001.5,8,4989.0],["美的",699.0,3999.0,699.0,3999.0,1974.44,18,23296.0],["美菱",799.0,4299.0,799.0,4299.0,2227.57,14,8440.0],["荣事达",1299.0,1299.0,1299.0,1299.0,1299.0,1,77.0],["西门子",2398.0,16030.0,2398.0,16030.0,5372.11,28,6388.0],["长虹",749.0,1149.0,749.0,1149.0,949.0,2,443.0],["韩上",488.0,999.0,488.0,999.0,816.8,5,6730.0],["韩电",638.0,1999.0,638.0,1999.0,1094.0,9,918.0]];
// 处理数组对象
function splitData(rawData) {
var categoryData = [];
var values = [];
var avgvalues = [];
var counts = [];
var solds = [];
for (var i = 0; i < rawData.length; i++) {
categoryData.push(rawData[i].splice(0, 1)[0]);
avgvalues.push(rawData[i].splice(4, 1)[0]);
counts.push(rawData[i].splice(4, 1)[0]);
solds.push(rawData[i].splice(4, 1)[0]);
values.push(rawData[i])
}
return {
categoryData: categoryData,
values: values,
avgvalues: avgvalues,
counts: counts,
solds: solds
};
}
var klineData = splitData(k);
console.log(klineData.categoryData);
// K线图对象
var klineOptionTemplate = {
title: {
show: false
},
tooltip: {
trigger: 'axis',
// axisPointer: {type: 'cross'}
},
legend: {
data: ['价格区间', '平均价格', '商品数', '30天总销量']
},
dataZoom: [{
type: 'inside',
start: 0,
end: 50
},
{
show: true,
type: 'slider',
y: '90%',
start: 0,
end: 50
}
],
grid: {
left: '10%',
right: '10%',
bottom: '15%'
},
xAxis: {
type: 'category',
scale: true,
boundaryGap: false,
axisLine: {
onZero: false
},
splitLine: {
show: false
},
splitNumber: 20,
data:klineData.categoryData
},
yAxis: [{
type: 'value',
name: '价格',
position: 'left',
axisLabel: {
formatter: '{value}'
},
},
{
type: 'value',
name: '商品数',
position: 'right',
axisLabel: {
formatter: '{value}'
},
},
{
type: 'value',
name: '30天总销量',
position: 'right',
offset: 50,
axisLabel: {
formatter: '{value} '
},
}
],
series: [{
name: '价格区间',
type: 'candlestick',
data:klineData.values,
barWidth: 10,
markPoint: {
data: [
{
name: 'highest value',
type: 'max',
valueDim: 'highest'
},
{
name: 'lowest value',
type: 'min',
valueDim: 'lowest'
},
{
name: 'average value on close',
type: 'average',
valueDim: 'open'
}
]
}
},
{
name: '平均价格',
type: 'line',
smooth: true,
data: klineData.avgvalues,
markPoint : {
data : [
{type : 'max', name : '最大值'},
{type : 'min', name : '最小值'}
]
},
lineStyle: {
normal: {
opacity: 0.5
}
}
},
{
name: '商品数',
type: 'line',
data: klineData.counts,
markPoint : {
data : [
{type : 'max', name : '最大值'},
{type : 'min', name : '最小值'}
]
},
yAxisIndex: 1,
smooth: true,
lineStyle: {
normal: {
opacity: 0.5
}
}
},
{
name: '30天总销量',
type: 'line',
data:klineData.solds,
markPoint : {
data : [
{type : 'max', name : '最大值'},
{type : 'min', name : '最小值'}
]
},
yAxisIndex: 2,
smooth: true,
lineStyle: {
normal: {
opacity: 0.5
}
}
}
]
};
~~~
buildChartOption函数里加载模板
~~~
case "kline":
option = angular.copy(klineOptionTemplate);
break;
~~~
默认配置项
处理数据的方法调用
~~~
case "kline":
internalRefreshKlineModelData();
break;
~~~
处理数据函数
~~~
// k线图处理数据函数
var internalRefreshKlineModelData = function(){
var option = component.config.chartConfig;
var dimensions = component.config.datasourceConfig.dimensions;
var measures = component.config.datasourceConfig.measures;
var data = component.context.data;
if (data == null || data.length < 1 || measures.length < 1) {
return
}
// 设置一个新度量的空数组
var newMeasures = [];
// 循环遍历选中的度量
for (var i = 0; i < measures.length; i++) {
var show = component.config["show_" + i];
console.log(component.config)
if (show != null && show === false) {
// 结束本次循环（跳过下一步）
continue
}
// push进新度量数组
newMeasures.push(measures[i])
}
// console.log(newMeasures)
// 新度量数组赋值给初始数组
measures = newMeasures;
console.log(option.series.length)
console.log(measures.length)
}
~~~
- video
- treemap
- mian.html文件注释
- 配置项tab
- 配置项属性
- internalRefreshAxisMdelData函数梳理
- 函数配置项-engine文件
- 替换数据源流程
- design.js
- 树图
- 下钻 废弃
- 人体图
- 下钻地图
- 行列互转
- 预览样式
- logo旁边的报表名
- echarts 组件生成图片
- 数据集样式
- 头部 黑色head
- 手机 ipad 图片
- k线图部分
- 平台管理css样式
- 目录css和平板的边距
- 设计页-数据源-目录
- 数据集 - 查看数据表 -按钮和目录样式
- 报表列表页按钮css
- 角色管理页按钮css
- 推送通知按钮css
- 子账号按钮css
- 数据连接
- openlayers地图线路图
- openlayers4_map_designer.js
- openlayers4_map_view.js
- 说明
- 常用图标小bug
- echarts 气泡地图
- echarts 线路轨迹图
- 导出pdf
- 可视化sql--css
- 表格滚动
- 主题色
- 时间轴
- 分享弹框
- 管理平台header和菜单
- 报表平台和菜单
- 初始化组件颜色
- 其他弹框
- olap分析样式-废弃
- 3d地图柱状图
- 关系图
- olap分析
- 地区地图
- k线图相关属性设置
- 世界地图
- 时间轴（new）
- 选择省份下转地图
- 选择省市飞线地图
- 面积预警地图默认颜色
- 组件覆层开关组件
- 汽车仪表盘bug
- 雷达图bug修复不能分享的问题
- 饼状 条形图 自动播放
- 临时用
- 自动轮播
- 方形元素 按钮浮动报错
- 面积预警地图整合可选择省市区
- 下钻地图添加返回按钮
- 下钻地图修复预警bug
- 基本时间组件
- 添加时钟组件
- 3d地球组件
- 盒须图
- 组件加载动画
- 报表背景渐变色
- 主题模板
- 没用
- 3机房第三方组件
- 设计
- 分享
- 3d机房需要的静态资源
- cesium地球需要的文件以及样式
- cesium地球
- 设计页
- 分享页
- 图标条形图
- 世豪-前端代码整理
- component.css 文件新添加
- 杂项
- index.jsp
- designer.css 样式暂时不整理 里面比较杂
- vs-common.js 新加生成html2canvas pdf
- vs-component-basic.js 完
- vs-component-datasource.js 完
- vs-component-engine.js 完
- vs-component-widget-grid.js 完
- vs-component-widget-square.js 完
- vs-designer.js 完
- vs-designer-component.js 完
- vs-designer-report.js 完
- vs-designer-reportpage.js 完
- vs-component-echarts.js 完
- main.html 完
- component.html 新加组件设置页模板
- 以前的报表页设置控制器---做个记录
- 大概修改过的代码
- 2019-5-8 修改皮肤控制器
- 选择模板
- 桑基图2019-11-20
- bug 修正 2019-11-21
- 插图柱状图
- cesiumchart组件
- gis 地图 联动 弹框 图标
- 动态面积图添加按钮类配置项
- 玫瑰图形组件
- cesium 图形 和three.js 冲突的bug
- gis 地图 默认图层
- 网格标签
- gis 点图 值域
- gis 面图 值域
- 按钮图标添加提示框
- 百度地图
- 剩余的组件
- gulp说明文档
- 色斑图加透明