低代码高性能原生UI框架Line 折线图
平台兼容性
| Android uni-app-x | iOS uni-app-x | web | 小程序 |
|---|---|---|---|
| √ | x | x | x |
示例代码
html
<template>
<ux-page :colors="['black']">
<ux-navbar title="Line" :border="false"></ux-navbar>
<ux-col>
<view style="height: 400px;">
<ux-chart ref="UxChart" :data="chart"></ux-chart>
</view>
</ux-col>
</ux-page>
</template><template>
<ux-page :colors="['black']">
<ux-navbar title="Line" :border="false"></ux-navbar>
<ux-col>
<view style="height: 400px;">
<ux-chart ref="UxChart" :data="chart"></ux-chart>
</view>
</ux-col>
</ux-page>
</template>ts
<script>
import { UXChart } from "@/uni_modules/ux-frame/libs/types/chart.uts"
export default {
data() {
return {
}
},
computed: {
chart() : UXChart {
return {
source: {
data: this.getData(),
},
geom: {
line: [{
position: 'date*value',
color: {
field: 'type',
},
size: {
size: 3
}
}],
},
scale: [{
field: 'date',
conf: {
type: 'timeCat',
tickCount: 3
}
}, {
field: 'value',
conf: {
tickCount: 5
}
}],
axis: [{
field: 'date',
conf: {
label: `function(text, index, total) {
const textCfg = {};
if (index == 0) {
textCfg.textAlign = 'left';
} else if (index == total - 1) {
textCfg.textAlign = 'right';
}
return textCfg;
}`
}
}],
legend: {
position: 'top'
},
tooltip: {
custom: true,
onChange: `function(obj) {
const legend = chart.get('legendController').legends.top[0];
const tooltipItems = obj.items;
const legendItems = legend.items;
const map = {};
legendItems.forEach(function (item) {
map[item.name] = _.clone(item);
});
tooltipItems.forEach(function (item) {
const name = item.name;
const value = item.value;
if (map[name]) {
map[name].value = value;
}
});
legend.setItems(_.values(map));
}`,
onHide: `function() {
const legend = chart.get('legendController').legends.top[0];
legend.setItems(chart.getLegendItems().country);
}`
}
} as UXChart
}
},
onLoad(e : OnLoadOptions) {
},
methods: {
getData() : UTSJSONObject[] {
return [
{
"date": "2010-01-10",
"type": "能源",
"value": 99.9
},
{
"date": "2010-01-10",
"type": "金属",
"value": 96.6
},
{
"date": "2010-01-10",
"type": "农副产品",
"value": 96.2
},
{
"date": "2010-02-10",
"type": "能源",
"value": 96.7
},
{
"date": "2010-02-10",
"type": "金属",
"value": 91.1
},
{
"date": "2010-02-10",
"type": "农副产品",
"value": 93.4
},
{
"date": "2010-03-10",
"type": "能源",
"value": 100.2
},
{
"date": "2010-03-10",
"type": "金属",
"value": 99.4
},
{
"date": "2010-03-10",
"type": "农副产品",
"value": 91.7
},
{
"date": "2010-04-10",
"type": "能源",
"value": 104.7
},
{
"date": "2010-04-10",
"type": "金属",
"value": 108.1
},
{
"date": "2010-04-10",
"type": "农副产品",
"value": 93.1
},
{
"date": "2010-05-10",
"type": "能源",
"value": 95.6
},
{
"date": "2010-05-10",
"type": "金属",
"value": 96
},
{
"date": "2010-05-10",
"type": "农副产品",
"value": 92.3
},
{
"date": "2010-06-10",
"type": "能源",
"value": 95.6
},
{
"date": "2010-06-10",
"type": "金属",
"value": 89.1
},
{
"date": "2010-06-10",
"type": "农副产品",
"value": 92.5
},
{
"date": "2010-07-10",
"type": "能源",
"value": 95.3
},
{
"date": "2010-07-10",
"type": "金属",
"value": 89.2
},
{
"date": "2010-07-10",
"type": "农副产品",
"value": 95.7
},
{
"date": "2010-08-10",
"type": "能源",
"value": 96.1
},
{
"date": "2010-08-10",
"type": "金属",
"value": 97.6
},
{
"date": "2010-08-10",
"type": "农副产品",
"value": 99.9
},
{
"date": "2010-09-10",
"type": "能源",
"value": 96.1
},
{
"date": "2010-09-10",
"type": "金属",
"value": 100.6
},
{
"date": "2010-09-10",
"type": "农副产品",
"value": 103.8
},
{
"date": "2010-10-10",
"type": "能源",
"value": 101.6
},
{
"date": "2010-10-10",
"type": "金属",
"value": 108.3
},
{
"date": "2010-10-10",
"type": "农副产品",
"value": 108.9
},
{
"date": "2010-11-10",
"type": "能源",
"value": 105.6
},
{
"date": "2010-11-10",
"type": "金属",
"value": 109.4
},
{
"date": "2010-11-10",
"type": "农副产品",
"value": 113.7
},
{
"date": "2010-12-10",
"type": "能源",
"value": 112.7
},
{
"date": "2010-12-10",
"type": "金属",
"value": 114.5
},
{
"date": "2010-12-10",
"type": "农副产品",
"value": 118.8
},
{
"date": "2011-01-11",
"type": "能源",
"value": 117
},
{
"date": "2011-01-11",
"type": "金属",
"value": 120.8
},
{
"date": "2011-01-11",
"type": "农副产品",
"value": 124.3
},
{
"date": "2011-02-11",
"type": "能源",
"value": 121.8
},
{
"date": "2011-02-11",
"type": "金属",
"value": 125.8
},
{
"date": "2011-02-11",
"type": "农副产品",
"value": 130.1
},
{
"date": "2011-03-11",
"type": "能源",
"value": 133.1
},
{
"date": "2011-03-11",
"type": "金属",
"value": 121.4
},
{
"date": "2011-03-11",
"type": "农副产品",
"value": 125.8
},
{
"date": "2011-04-11",
"type": "能源",
"value": 141.9
},
{
"date": "2011-04-11",
"type": "金属",
"value": 124.3
},
{
"date": "2011-04-11",
"type": "农副产品",
"value": 127.4
},
{
"date": "2011-05-11",
"type": "能源",
"value": 133.1
},
{
"date": "2011-05-11",
"type": "金属",
"value": 118.5
},
{
"date": "2011-05-11",
"type": "农副产品",
"value": 123.9
},
{
"date": "2011-06-11",
"type": "能源",
"value": 131.2
},
{
"date": "2011-06-11",
"type": "金属",
"value": 117
},
{
"date": "2011-06-11",
"type": "农副产品",
"value": 123.2
},
{
"date": "2011-07-11",
"type": "能源",
"value": 133.7
},
{
"date": "2011-07-11",
"type": "金属",
"value": 121
},
{
"date": "2011-07-11",
"type": "农副产品",
"value": 122.6
},
{
"date": "2011-08-11",
"type": "能源",
"value": 125.2
},
{
"date": "2011-08-11",
"type": "金属",
"value": 114.8
},
{
"date": "2011-08-11",
"type": "农副产品",
"value": 123.2
},
{
"date": "2011-09-11",
"type": "能源",
"value": 125.5
},
{
"date": "2011-09-11",
"type": "金属",
"value": 109.1
},
{
"date": "2011-09-11",
"type": "农副产品",
"value": 121.6
},
{
"date": "2011-10-11",
"type": "能源",
"value": 124.2
},
{
"date": "2011-10-11",
"type": "金属",
"value": 98.4
},
{
"date": "2011-10-11",
"type": "农副产品",
"value": 115.6
},
{
"date": "2011-11-11",
"type": "能源",
"value": 129.4
},
{
"date": "2011-11-11",
"type": "金属",
"value": 95.8
},
{
"date": "2011-11-11",
"type": "农副产品",
"value": 112.2
},
{
"date": "2011-12-11",
"type": "能源",
"value": 128
},
{
"date": "2011-12-11",
"type": "金属",
"value": 95.1
},
{
"date": "2011-12-11",
"type": "农副产品",
"value": 109.1
},
{
"date": "2012-01-12",
"type": "能源",
"value": 130.6
},
{
"date": "2012-01-12",
"type": "金属",
"value": 100.5
},
{
"date": "2012-01-12",
"type": "农副产品",
"value": 111
},
{
"date": "2012-02-12",
"type": "能源",
"value": 136.2
},
{
"date": "2012-02-12",
"type": "金属",
"value": 104
},
{
"date": "2012-02-12",
"type": "农副产品",
"value": 113.4
},
{
"date": "2012-03-12",
"type": "能源",
"value": 141.2
},
{
"date": "2012-03-12",
"type": "金属",
"value": 103.5
},
{
"date": "2012-03-12",
"type": "农副产品",
"value": 114.6
},
{
"date": "2012-04-12",
"type": "能源",
"value": 136.1
},
{
"date": "2012-04-12",
"type": "金属",
"value": 101
},
{
"date": "2012-04-12",
"type": "农副产品",
"value": 114.8
},
{
"date": "2012-05-12",
"type": "能源",
"value": 126.3
},
{
"date": "2012-05-12",
"type": "金属",
"value": 96.6
},
{
"date": "2012-05-12",
"type": "农副产品",
"value": 113.1
},
{
"date": "2012-06-12",
"type": "能源",
"value": 111.5
},
{
"date": "2012-06-12",
"type": "金属",
"value": 91.6
},
{
"date": "2012-06-12",
"type": "农副产品",
"value": 110.7
},
{
"date": "2012-07-12",
"type": "能源",
"value": 118.6
},
{
"date": "2012-07-12",
"type": "金属",
"value": 91.2
},
{
"date": "2012-07-12",
"type": "农副产品",
"value": 118.7
},
{
"date": "2012-08-12",
"type": "能源",
"value": 127.7
},
{
"date": "2012-08-12",
"type": "金属",
"value": 87.7
},
{
"date": "2012-08-12",
"type": "农副产品",
"value": 118.6
},
{
"date": "2012-09-12",
"type": "能源",
"value": 128.5
},
{
"date": "2012-09-12",
"type": "金属",
"value": 93.6
},
{
"date": "2012-09-12",
"type": "农副产品",
"value": 118.5
},
{
"date": "2012-10-12",
"type": "能源",
"value": 125.9
},
{
"date": "2012-10-12",
"type": "金属",
"value": 94
},
{
"date": "2012-10-12",
"type": "农副产品",
"value": 115.2
},
{
"date": "2012-11-12",
"type": "能源",
"value": 124.1
},
{
"date": "2012-11-12",
"type": "金属",
"value": 92.4
},
{
"date": "2012-11-12",
"type": "农副产品",
"value": 113
},
{
"date": "2012-12-12",
"type": "能源",
"value": 124.2
},
{
"date": "2012-12-12",
"type": "金属",
"value": 97.4
},
{
"date": "2012-12-12",
"type": "农副产品",
"value": 112.4
},
{
"date": "2013-01-13",
"type": "能源",
"value": 128.4
},
{
"date": "2013-01-13",
"type": "金属",
"value": 100.3
},
{
"date": "2013-01-13",
"type": "农副产品",
"value": 111.5
},
{
"date": "2013-02-13",
"type": "能源",
"value": 131.2
},
{
"date": "2013-02-13",
"type": "金属",
"value": 101.3
},
{
"date": "2013-02-13",
"type": "农副产品",
"value": 110.4
},
{
"date": "2013-03-13",
"type": "能源",
"value": 126.2
},
{
"date": "2013-03-13",
"type": "金属",
"value": 94.5
},
{
"date": "2013-03-13",
"type": "农副产品",
"value": 108.4
},
{
"date": "2013-04-13",
"type": "能源",
"value": 123.1
},
{
"date": "2013-04-13",
"type": "金属",
"value": 90.7
},
{
"date": "2013-04-13",
"type": "农副产品",
"value": 106
},
{
"date": "2013-05-13",
"type": "能源",
"value": 123.2
},
{
"date": "2013-05-13",
"type": "金属",
"value": 88.3
},
{
"date": "2013-05-13",
"type": "农副产品",
"value": 108.1
},
{
"date": "2013-06-13",
"type": "能源",
"value": 122.9
},
{
"date": "2013-06-13",
"type": "金属",
"value": 85.4
},
{
"date": "2013-06-13",
"type": "农副产品",
"value": 107.7
},
{
"date": "2013-07-13",
"type": "能源",
"value": 128.1
},
{
"date": "2013-07-13",
"type": "金属",
"value": 85.7
},
{
"date": "2013-07-13",
"type": "农副产品",
"value": 105.6
},
{
"date": "2013-08-13",
"type": "能源",
"value": 130.9
},
{
"date": "2013-08-13",
"type": "金属",
"value": 89.6
},
{
"date": "2013-08-13",
"type": "农副产品",
"value": 103.8
},
{
"date": "2013-09-13",
"type": "能源",
"value": 131.6
},
{
"date": "2013-09-13",
"type": "金属",
"value": 88.2
},
{
"date": "2013-09-13",
"type": "农副产品",
"value": 103.6
},
{
"date": "2013-10-13",
"type": "能源",
"value": 128.3
},
{
"date": "2013-10-13",
"type": "金属",
"value": 89.1
},
{
"date": "2013-10-13",
"type": "农副产品",
"value": 104
},
{
"date": "2013-11-13",
"type": "能源",
"value": 125.4
},
{
"date": "2013-11-13",
"type": "金属",
"value": 87.8
},
{
"date": "2013-11-13",
"type": "农副产品",
"value": 103.3
},
{
"date": "2013-12-13",
"type": "能源",
"value": 129.5
},
{
"date": "2013-12-13",
"type": "金属",
"value": 88.7
},
{
"date": "2013-12-13",
"type": "农副产品",
"value": 103.4
},
{
"date": "2014-01-14",
"type": "能源",
"value": 126.4
},
{
"date": "2014-01-14",
"type": "金属",
"value": 88.1
},
{
"date": "2014-01-14",
"type": "农副产品",
"value": 102.3
},
{
"date": "2014-02-14",
"type": "能源",
"value": 130.6
},
{
"date": "2014-02-14",
"type": "金属",
"value": 86.2
},
{
"date": "2014-02-14",
"type": "农副产品",
"value": 106.1
},
{
"date": "2014-03-14",
"type": "能源",
"value": 127.9
},
{
"date": "2014-03-14",
"type": "金属",
"value": 83
},
{
"date": "2014-03-14",
"type": "农副产品",
"value": 108
},
{
"date": "2014-04-14",
"type": "能源",
"value": 128.4
},
{
"date": "2014-04-14",
"type": "金属",
"value": 85.5
},
{
"date": "2014-04-14",
"type": "农副产品",
"value": 107.2
},
{
"date": "2014-05-14",
"type": "能源",
"value": 129
},
{
"date": "2014-05-14",
"type": "金属",
"value": 84.8
},
{
"date": "2014-05-14",
"type": "农副产品",
"value": 107.2
},
{
"date": "2014-06-14",
"type": "能源",
"value": 131.5
},
{
"date": "2014-06-14",
"type": "金属",
"value": 84.4
},
{
"date": "2014-06-14",
"type": "农副产品",
"value": 105.2
},
{
"date": "2014-07-14",
"type": "能源",
"value": 126.9
},
{
"date": "2014-07-14",
"type": "金属",
"value": 88.2
},
{
"date": "2014-07-14",
"type": "农副产品",
"value": 103.2
},
{
"date": "2014-08-14",
"type": "能源",
"value": 121.2
},
{
"date": "2014-08-14",
"type": "金属",
"value": 88
},
{
"date": "2014-08-14",
"type": "农副产品",
"value": 102.1
},
{
"date": "2014-09-14",
"type": "能源",
"value": 116.6
},
{
"date": "2014-09-14",
"type": "金属",
"value": 85.1
},
{
"date": "2014-09-14",
"type": "农副产品",
"value": 98.4
},
{
"date": "2014-10-14",
"type": "能源",
"value": 106.2
},
{
"date": "2014-10-14",
"type": "金属",
"value": 82.6
},
{
"date": "2014-10-14",
"type": "农副产品",
"value": 98
},
{
"date": "2014-11-14",
"type": "能源",
"value": 96.4
},
{
"date": "2014-11-14",
"type": "金属",
"value": 82.9
},
{
"date": "2014-11-14",
"type": "农副产品",
"value": 98.3
},
{
"date": "2014-12-14",
"type": "能源",
"value": 78.6
},
{
"date": "2014-12-14",
"type": "金属",
"value": 78.8
},
{
"date": "2014-12-14",
"type": "农副产品",
"value": 96.8
},
{
"date": "2015-01-15",
"type": "能源",
"value": 63.1
},
{
"date": "2015-01-15",
"type": "金属",
"value": 73.9
},
{
"date": "2015-01-15",
"type": "农副产品",
"value": 94.7
},
{
"date": "2015-02-15",
"type": "能源",
"value": 70.4
},
{
"date": "2015-02-15",
"type": "金属",
"value": 72.4
},
{
"date": "2015-02-15",
"type": "农副产品",
"value": 93.4
},
{
"date": "2015-03-15",
"type": "能源",
"value": 68.1
},
{
"date": "2015-03-15",
"type": "金属",
"value": 71.8
},
{
"date": "2015-03-15",
"type": "农副产品",
"value": 90.7
},
{
"date": "2015-04-15",
"type": "能源",
"value": 72.2
},
{
"date": "2015-04-15",
"type": "金属",
"value": 72.1
},
{
"date": "2015-04-15",
"type": "农副产品",
"value": 90.4
},
{
"date": "2015-05-15",
"type": "能源",
"value": 77.8
},
{
"date": "2015-05-15",
"type": "金属",
"value": 74.6
},
{
"date": "2015-05-15",
"type": "农副产品",
"value": 90.1
},
{
"date": "2015-06-15",
"type": "能源",
"value": 76.3
},
{
"date": "2015-06-15",
"type": "金属",
"value": 70.3
},
{
"date": "2015-06-15",
"type": "农副产品",
"value": 90.2
},
{
"date": "2015-07-15",
"type": "能源",
"value": 68.8
},
{
"date": "2015-07-15",
"type": "金属",
"value": 65.7
},
{
"date": "2015-07-15",
"type": "农副产品",
"value": 90.8
},
{
"date": "2015-08-15",
"type": "能源",
"value": 59.5
},
{
"date": "2015-08-15",
"type": "金属",
"value": 62.7
},
{
"date": "2015-08-15",
"type": "农副产品",
"value": 87.5
},
{
"date": "2015-09-15",
"type": "能源",
"value": 59.7
},
{
"date": "2015-09-15",
"type": "金属",
"value": 63.4
},
{
"date": "2015-09-15",
"type": "农副产品",
"value": 85.8
},
{
"date": "2015-10-15",
"type": "能源",
"value": 59.7
},
{
"date": "2015-10-15",
"type": "金属",
"value": 62.2
},
{
"date": "2015-10-15",
"type": "农副产品",
"value": 86.8
},
{
"date": "2015-11-15",
"type": "能源",
"value": 55.2
},
{
"date": "2015-11-15",
"type": "金属",
"value": 57.8
},
{
"date": "2015-11-15",
"type": "农副产品",
"value": 85.7
},
{
"date": "2015-12-15",
"type": "能源",
"value": 47.8
},
{
"date": "2015-12-15",
"type": "金属",
"value": 56.3
},
{
"date": "2015-12-15",
"type": "农副产品",
"value": 85.4
},
{
"date": "2016-01-16",
"type": "能源",
"value": 40.5
},
{
"date": "2016-01-16",
"type": "金属",
"value": 55.2
},
{
"date": "2016-01-16",
"type": "农副产品",
"value": 83.5
},
{
"date": "2016-02-16",
"type": "能源",
"value": 41.2
},
{
"date": "2016-02-16",
"type": "金属",
"value": 57.7
},
{
"date": "2016-02-16",
"type": "农副产品",
"value": 84.2
},
{
"date": "2016-03-16",
"type": "能源",
"value": 47.3
},
{
"date": "2016-03-16",
"type": "金属",
"value": 61.2
},
{
"date": "2016-03-16",
"type": "农副产品",
"value": 85.9
},
{
"date": "2016-04-16",
"type": "能源",
"value": 51.1
},
{
"date": "2016-04-16",
"type": "金属",
"value": 62
},
{
"date": "2016-04-16",
"type": "农副产品",
"value": 88.3
},
{
"date": "2016-05-16",
"type": "能源",
"value": 56.6
},
{
"date": "2016-05-16",
"type": "金属",
"value": 60
},
{
"date": "2016-05-16",
"type": "农副产品",
"value": 91.1
},
{
"date": "2016-06-16",
"type": "能源",
"value": 59.4
},
{
"date": "2016-06-16",
"type": "金属",
"value": 60.3
},
{
"date": "2016-06-16",
"type": "农副产品",
"value": 93.8
},
{
"date": "2016-07-16",
"type": "能源",
"value": 56.6
},
{
"date": "2016-07-16",
"type": "金属",
"value": 63.5
},
{
"date": "2016-07-16",
"type": "农副产品",
"value": 91.9
},
{
"date": "2016-08-16",
"type": "能源",
"value": 57.6
},
{
"date": "2016-08-16",
"type": "金属",
"value": 63.8
},
{
"date": "2016-08-16",
"type": "农副产品",
"value": 90.9
},
{
"date": "2016-09-16",
"type": "能源",
"value": 58.2
},
{
"date": "2016-09-16",
"type": "金属",
"value": 62.8
},
{
"date": "2016-09-16",
"type": "农副产品",
"value": 90.5
},
{
"date": "2016-10-16",
"type": "能源",
"value": 63.7
},
{
"date": "2016-10-16",
"type": "金属",
"value": 64.1
},
{
"date": "2016-10-16",
"type": "农副产品",
"value": 89.5
},
{
"date": "2016-11-16",
"type": "能源",
"value": 59.4
},
{
"date": "2016-11-16",
"type": "金属",
"value": 71.5
},
{
"date": "2016-11-16",
"type": "农副产品",
"value": 89.9
},
{
"date": "2016-12-16",
"type": "能源",
"value": 68.4
},
{
"date": "2016-12-16",
"type": "金属",
"value": 73.5
},
{
"date": "2016-12-16",
"type": "农副产品",
"value": 89.4
},
{
"date": "2017-01-17",
"type": "能源",
"value": 68.9
},
{
"date": "2017-01-17",
"type": "金属",
"value": 74.5
},
{
"date": "2017-01-17",
"type": "农副产品",
"value": 91.3
},
{
"date": "2017-02-17",
"type": "能源",
"value": 69.4
},
{
"date": "2017-02-17",
"type": "金属",
"value": 77.9
},
{
"date": "2017-02-17",
"type": "农副产品",
"value": 91.3
},
{
"date": "2017-03-17",
"type": "能源",
"value": 65.3
},
{
"date": "2017-03-17",
"type": "金属",
"value": 77.3
},
{
"date": "2017-03-17",
"type": "农副产品",
"value": 89.2
},
{
"date": "2017-04-17",
"type": "能源",
"value": 67.1
},
{
"date": "2017-04-17",
"type": "金属",
"value": 74
},
{
"date": "2017-04-17",
"type": "农副产品",
"value": 87.7
},
{
"date": "2017-05-17",
"type": "能源",
"value": 64.3
},
{
"date": "2017-05-17",
"type": "金属",
"value": 72.2
},
{
"date": "2017-05-17",
"type": "农副产品",
"value": 88.9
},
{
"date": "2017-06-17",
"type": "能源",
"value": 60.4
},
{
"date": "2017-06-17",
"type": "金属",
"value": 71.7
},
{
"date": "2017-06-17",
"type": "农副产品",
"value": 87.4
},
{
"date": "2017-07-17",
"type": "能源",
"value": 62.3
},
{
"date": "2017-07-17",
"type": "金属",
"value": 75.4
},
{
"date": "2017-07-17",
"type": "农副产品",
"value": 88.1
},
{
"date": "2017-08-17",
"type": "能源",
"value": 65
},
{
"date": "2017-08-17",
"type": "金属",
"value": 81.6
},
{
"date": "2017-08-17",
"type": "农副产品",
"value": 86.5
},
{
"date": "2017-09-17",
"type": "能源",
"value": 68.5
},
{
"date": "2017-09-17",
"type": "金属",
"value": 82.7
},
{
"date": "2017-09-17",
"type": "农副产品",
"value": 87.7
}
] as UTSJSONObject[]
},
}
}
</script><script>
import { UXChart } from "@/uni_modules/ux-frame/libs/types/chart.uts"
export default {
data() {
return {
}
},
computed: {
chart() : UXChart {
return {
source: {
data: this.getData(),
},
geom: {
line: [{
position: 'date*value',
color: {
field: 'type',
},
size: {
size: 3
}
}],
},
scale: [{
field: 'date',
conf: {
type: 'timeCat',
tickCount: 3
}
}, {
field: 'value',
conf: {
tickCount: 5
}
}],
axis: [{
field: 'date',
conf: {
label: `function(text, index, total) {
const textCfg = {};
if (index == 0) {
textCfg.textAlign = 'left';
} else if (index == total - 1) {
textCfg.textAlign = 'right';
}
return textCfg;
}`
}
}],
legend: {
position: 'top'
},
tooltip: {
custom: true,
onChange: `function(obj) {
const legend = chart.get('legendController').legends.top[0];
const tooltipItems = obj.items;
const legendItems = legend.items;
const map = {};
legendItems.forEach(function (item) {
map[item.name] = _.clone(item);
});
tooltipItems.forEach(function (item) {
const name = item.name;
const value = item.value;
if (map[name]) {
map[name].value = value;
}
});
legend.setItems(_.values(map));
}`,
onHide: `function() {
const legend = chart.get('legendController').legends.top[0];
legend.setItems(chart.getLegendItems().country);
}`
}
} as UXChart
}
},
onLoad(e : OnLoadOptions) {
},
methods: {
getData() : UTSJSONObject[] {
return [
{
"date": "2010-01-10",
"type": "能源",
"value": 99.9
},
{
"date": "2010-01-10",
"type": "金属",
"value": 96.6
},
{
"date": "2010-01-10",
"type": "农副产品",
"value": 96.2
},
{
"date": "2010-02-10",
"type": "能源",
"value": 96.7
},
{
"date": "2010-02-10",
"type": "金属",
"value": 91.1
},
{
"date": "2010-02-10",
"type": "农副产品",
"value": 93.4
},
{
"date": "2010-03-10",
"type": "能源",
"value": 100.2
},
{
"date": "2010-03-10",
"type": "金属",
"value": 99.4
},
{
"date": "2010-03-10",
"type": "农副产品",
"value": 91.7
},
{
"date": "2010-04-10",
"type": "能源",
"value": 104.7
},
{
"date": "2010-04-10",
"type": "金属",
"value": 108.1
},
{
"date": "2010-04-10",
"type": "农副产品",
"value": 93.1
},
{
"date": "2010-05-10",
"type": "能源",
"value": 95.6
},
{
"date": "2010-05-10",
"type": "金属",
"value": 96
},
{
"date": "2010-05-10",
"type": "农副产品",
"value": 92.3
},
{
"date": "2010-06-10",
"type": "能源",
"value": 95.6
},
{
"date": "2010-06-10",
"type": "金属",
"value": 89.1
},
{
"date": "2010-06-10",
"type": "农副产品",
"value": 92.5
},
{
"date": "2010-07-10",
"type": "能源",
"value": 95.3
},
{
"date": "2010-07-10",
"type": "金属",
"value": 89.2
},
{
"date": "2010-07-10",
"type": "农副产品",
"value": 95.7
},
{
"date": "2010-08-10",
"type": "能源",
"value": 96.1
},
{
"date": "2010-08-10",
"type": "金属",
"value": 97.6
},
{
"date": "2010-08-10",
"type": "农副产品",
"value": 99.9
},
{
"date": "2010-09-10",
"type": "能源",
"value": 96.1
},
{
"date": "2010-09-10",
"type": "金属",
"value": 100.6
},
{
"date": "2010-09-10",
"type": "农副产品",
"value": 103.8
},
{
"date": "2010-10-10",
"type": "能源",
"value": 101.6
},
{
"date": "2010-10-10",
"type": "金属",
"value": 108.3
},
{
"date": "2010-10-10",
"type": "农副产品",
"value": 108.9
},
{
"date": "2010-11-10",
"type": "能源",
"value": 105.6
},
{
"date": "2010-11-10",
"type": "金属",
"value": 109.4
},
{
"date": "2010-11-10",
"type": "农副产品",
"value": 113.7
},
{
"date": "2010-12-10",
"type": "能源",
"value": 112.7
},
{
"date": "2010-12-10",
"type": "金属",
"value": 114.5
},
{
"date": "2010-12-10",
"type": "农副产品",
"value": 118.8
},
{
"date": "2011-01-11",
"type": "能源",
"value": 117
},
{
"date": "2011-01-11",
"type": "金属",
"value": 120.8
},
{
"date": "2011-01-11",
"type": "农副产品",
"value": 124.3
},
{
"date": "2011-02-11",
"type": "能源",
"value": 121.8
},
{
"date": "2011-02-11",
"type": "金属",
"value": 125.8
},
{
"date": "2011-02-11",
"type": "农副产品",
"value": 130.1
},
{
"date": "2011-03-11",
"type": "能源",
"value": 133.1
},
{
"date": "2011-03-11",
"type": "金属",
"value": 121.4
},
{
"date": "2011-03-11",
"type": "农副产品",
"value": 125.8
},
{
"date": "2011-04-11",
"type": "能源",
"value": 141.9
},
{
"date": "2011-04-11",
"type": "金属",
"value": 124.3
},
{
"date": "2011-04-11",
"type": "农副产品",
"value": 127.4
},
{
"date": "2011-05-11",
"type": "能源",
"value": 133.1
},
{
"date": "2011-05-11",
"type": "金属",
"value": 118.5
},
{
"date": "2011-05-11",
"type": "农副产品",
"value": 123.9
},
{
"date": "2011-06-11",
"type": "能源",
"value": 131.2
},
{
"date": "2011-06-11",
"type": "金属",
"value": 117
},
{
"date": "2011-06-11",
"type": "农副产品",
"value": 123.2
},
{
"date": "2011-07-11",
"type": "能源",
"value": 133.7
},
{
"date": "2011-07-11",
"type": "金属",
"value": 121
},
{
"date": "2011-07-11",
"type": "农副产品",
"value": 122.6
},
{
"date": "2011-08-11",
"type": "能源",
"value": 125.2
},
{
"date": "2011-08-11",
"type": "金属",
"value": 114.8
},
{
"date": "2011-08-11",
"type": "农副产品",
"value": 123.2
},
{
"date": "2011-09-11",
"type": "能源",
"value": 125.5
},
{
"date": "2011-09-11",
"type": "金属",
"value": 109.1
},
{
"date": "2011-09-11",
"type": "农副产品",
"value": 121.6
},
{
"date": "2011-10-11",
"type": "能源",
"value": 124.2
},
{
"date": "2011-10-11",
"type": "金属",
"value": 98.4
},
{
"date": "2011-10-11",
"type": "农副产品",
"value": 115.6
},
{
"date": "2011-11-11",
"type": "能源",
"value": 129.4
},
{
"date": "2011-11-11",
"type": "金属",
"value": 95.8
},
{
"date": "2011-11-11",
"type": "农副产品",
"value": 112.2
},
{
"date": "2011-12-11",
"type": "能源",
"value": 128
},
{
"date": "2011-12-11",
"type": "金属",
"value": 95.1
},
{
"date": "2011-12-11",
"type": "农副产品",
"value": 109.1
},
{
"date": "2012-01-12",
"type": "能源",
"value": 130.6
},
{
"date": "2012-01-12",
"type": "金属",
"value": 100.5
},
{
"date": "2012-01-12",
"type": "农副产品",
"value": 111
},
{
"date": "2012-02-12",
"type": "能源",
"value": 136.2
},
{
"date": "2012-02-12",
"type": "金属",
"value": 104
},
{
"date": "2012-02-12",
"type": "农副产品",
"value": 113.4
},
{
"date": "2012-03-12",
"type": "能源",
"value": 141.2
},
{
"date": "2012-03-12",
"type": "金属",
"value": 103.5
},
{
"date": "2012-03-12",
"type": "农副产品",
"value": 114.6
},
{
"date": "2012-04-12",
"type": "能源",
"value": 136.1
},
{
"date": "2012-04-12",
"type": "金属",
"value": 101
},
{
"date": "2012-04-12",
"type": "农副产品",
"value": 114.8
},
{
"date": "2012-05-12",
"type": "能源",
"value": 126.3
},
{
"date": "2012-05-12",
"type": "金属",
"value": 96.6
},
{
"date": "2012-05-12",
"type": "农副产品",
"value": 113.1
},
{
"date": "2012-06-12",
"type": "能源",
"value": 111.5
},
{
"date": "2012-06-12",
"type": "金属",
"value": 91.6
},
{
"date": "2012-06-12",
"type": "农副产品",
"value": 110.7
},
{
"date": "2012-07-12",
"type": "能源",
"value": 118.6
},
{
"date": "2012-07-12",
"type": "金属",
"value": 91.2
},
{
"date": "2012-07-12",
"type": "农副产品",
"value": 118.7
},
{
"date": "2012-08-12",
"type": "能源",
"value": 127.7
},
{
"date": "2012-08-12",
"type": "金属",
"value": 87.7
},
{
"date": "2012-08-12",
"type": "农副产品",
"value": 118.6
},
{
"date": "2012-09-12",
"type": "能源",
"value": 128.5
},
{
"date": "2012-09-12",
"type": "金属",
"value": 93.6
},
{
"date": "2012-09-12",
"type": "农副产品",
"value": 118.5
},
{
"date": "2012-10-12",
"type": "能源",
"value": 125.9
},
{
"date": "2012-10-12",
"type": "金属",
"value": 94
},
{
"date": "2012-10-12",
"type": "农副产品",
"value": 115.2
},
{
"date": "2012-11-12",
"type": "能源",
"value": 124.1
},
{
"date": "2012-11-12",
"type": "金属",
"value": 92.4
},
{
"date": "2012-11-12",
"type": "农副产品",
"value": 113
},
{
"date": "2012-12-12",
"type": "能源",
"value": 124.2
},
{
"date": "2012-12-12",
"type": "金属",
"value": 97.4
},
{
"date": "2012-12-12",
"type": "农副产品",
"value": 112.4
},
{
"date": "2013-01-13",
"type": "能源",
"value": 128.4
},
{
"date": "2013-01-13",
"type": "金属",
"value": 100.3
},
{
"date": "2013-01-13",
"type": "农副产品",
"value": 111.5
},
{
"date": "2013-02-13",
"type": "能源",
"value": 131.2
},
{
"date": "2013-02-13",
"type": "金属",
"value": 101.3
},
{
"date": "2013-02-13",
"type": "农副产品",
"value": 110.4
},
{
"date": "2013-03-13",
"type": "能源",
"value": 126.2
},
{
"date": "2013-03-13",
"type": "金属",
"value": 94.5
},
{
"date": "2013-03-13",
"type": "农副产品",
"value": 108.4
},
{
"date": "2013-04-13",
"type": "能源",
"value": 123.1
},
{
"date": "2013-04-13",
"type": "金属",
"value": 90.7
},
{
"date": "2013-04-13",
"type": "农副产品",
"value": 106
},
{
"date": "2013-05-13",
"type": "能源",
"value": 123.2
},
{
"date": "2013-05-13",
"type": "金属",
"value": 88.3
},
{
"date": "2013-05-13",
"type": "农副产品",
"value": 108.1
},
{
"date": "2013-06-13",
"type": "能源",
"value": 122.9
},
{
"date": "2013-06-13",
"type": "金属",
"value": 85.4
},
{
"date": "2013-06-13",
"type": "农副产品",
"value": 107.7
},
{
"date": "2013-07-13",
"type": "能源",
"value": 128.1
},
{
"date": "2013-07-13",
"type": "金属",
"value": 85.7
},
{
"date": "2013-07-13",
"type": "农副产品",
"value": 105.6
},
{
"date": "2013-08-13",
"type": "能源",
"value": 130.9
},
{
"date": "2013-08-13",
"type": "金属",
"value": 89.6
},
{
"date": "2013-08-13",
"type": "农副产品",
"value": 103.8
},
{
"date": "2013-09-13",
"type": "能源",
"value": 131.6
},
{
"date": "2013-09-13",
"type": "金属",
"value": 88.2
},
{
"date": "2013-09-13",
"type": "农副产品",
"value": 103.6
},
{
"date": "2013-10-13",
"type": "能源",
"value": 128.3
},
{
"date": "2013-10-13",
"type": "金属",
"value": 89.1
},
{
"date": "2013-10-13",
"type": "农副产品",
"value": 104
},
{
"date": "2013-11-13",
"type": "能源",
"value": 125.4
},
{
"date": "2013-11-13",
"type": "金属",
"value": 87.8
},
{
"date": "2013-11-13",
"type": "农副产品",
"value": 103.3
},
{
"date": "2013-12-13",
"type": "能源",
"value": 129.5
},
{
"date": "2013-12-13",
"type": "金属",
"value": 88.7
},
{
"date": "2013-12-13",
"type": "农副产品",
"value": 103.4
},
{
"date": "2014-01-14",
"type": "能源",
"value": 126.4
},
{
"date": "2014-01-14",
"type": "金属",
"value": 88.1
},
{
"date": "2014-01-14",
"type": "农副产品",
"value": 102.3
},
{
"date": "2014-02-14",
"type": "能源",
"value": 130.6
},
{
"date": "2014-02-14",
"type": "金属",
"value": 86.2
},
{
"date": "2014-02-14",
"type": "农副产品",
"value": 106.1
},
{
"date": "2014-03-14",
"type": "能源",
"value": 127.9
},
{
"date": "2014-03-14",
"type": "金属",
"value": 83
},
{
"date": "2014-03-14",
"type": "农副产品",
"value": 108
},
{
"date": "2014-04-14",
"type": "能源",
"value": 128.4
},
{
"date": "2014-04-14",
"type": "金属",
"value": 85.5
},
{
"date": "2014-04-14",
"type": "农副产品",
"value": 107.2
},
{
"date": "2014-05-14",
"type": "能源",
"value": 129
},
{
"date": "2014-05-14",
"type": "金属",
"value": 84.8
},
{
"date": "2014-05-14",
"type": "农副产品",
"value": 107.2
},
{
"date": "2014-06-14",
"type": "能源",
"value": 131.5
},
{
"date": "2014-06-14",
"type": "金属",
"value": 84.4
},
{
"date": "2014-06-14",
"type": "农副产品",
"value": 105.2
},
{
"date": "2014-07-14",
"type": "能源",
"value": 126.9
},
{
"date": "2014-07-14",
"type": "金属",
"value": 88.2
},
{
"date": "2014-07-14",
"type": "农副产品",
"value": 103.2
},
{
"date": "2014-08-14",
"type": "能源",
"value": 121.2
},
{
"date": "2014-08-14",
"type": "金属",
"value": 88
},
{
"date": "2014-08-14",
"type": "农副产品",
"value": 102.1
},
{
"date": "2014-09-14",
"type": "能源",
"value": 116.6
},
{
"date": "2014-09-14",
"type": "金属",
"value": 85.1
},
{
"date": "2014-09-14",
"type": "农副产品",
"value": 98.4
},
{
"date": "2014-10-14",
"type": "能源",
"value": 106.2
},
{
"date": "2014-10-14",
"type": "金属",
"value": 82.6
},
{
"date": "2014-10-14",
"type": "农副产品",
"value": 98
},
{
"date": "2014-11-14",
"type": "能源",
"value": 96.4
},
{
"date": "2014-11-14",
"type": "金属",
"value": 82.9
},
{
"date": "2014-11-14",
"type": "农副产品",
"value": 98.3
},
{
"date": "2014-12-14",
"type": "能源",
"value": 78.6
},
{
"date": "2014-12-14",
"type": "金属",
"value": 78.8
},
{
"date": "2014-12-14",
"type": "农副产品",
"value": 96.8
},
{
"date": "2015-01-15",
"type": "能源",
"value": 63.1
},
{
"date": "2015-01-15",
"type": "金属",
"value": 73.9
},
{
"date": "2015-01-15",
"type": "农副产品",
"value": 94.7
},
{
"date": "2015-02-15",
"type": "能源",
"value": 70.4
},
{
"date": "2015-02-15",
"type": "金属",
"value": 72.4
},
{
"date": "2015-02-15",
"type": "农副产品",
"value": 93.4
},
{
"date": "2015-03-15",
"type": "能源",
"value": 68.1
},
{
"date": "2015-03-15",
"type": "金属",
"value": 71.8
},
{
"date": "2015-03-15",
"type": "农副产品",
"value": 90.7
},
{
"date": "2015-04-15",
"type": "能源",
"value": 72.2
},
{
"date": "2015-04-15",
"type": "金属",
"value": 72.1
},
{
"date": "2015-04-15",
"type": "农副产品",
"value": 90.4
},
{
"date": "2015-05-15",
"type": "能源",
"value": 77.8
},
{
"date": "2015-05-15",
"type": "金属",
"value": 74.6
},
{
"date": "2015-05-15",
"type": "农副产品",
"value": 90.1
},
{
"date": "2015-06-15",
"type": "能源",
"value": 76.3
},
{
"date": "2015-06-15",
"type": "金属",
"value": 70.3
},
{
"date": "2015-06-15",
"type": "农副产品",
"value": 90.2
},
{
"date": "2015-07-15",
"type": "能源",
"value": 68.8
},
{
"date": "2015-07-15",
"type": "金属",
"value": 65.7
},
{
"date": "2015-07-15",
"type": "农副产品",
"value": 90.8
},
{
"date": "2015-08-15",
"type": "能源",
"value": 59.5
},
{
"date": "2015-08-15",
"type": "金属",
"value": 62.7
},
{
"date": "2015-08-15",
"type": "农副产品",
"value": 87.5
},
{
"date": "2015-09-15",
"type": "能源",
"value": 59.7
},
{
"date": "2015-09-15",
"type": "金属",
"value": 63.4
},
{
"date": "2015-09-15",
"type": "农副产品",
"value": 85.8
},
{
"date": "2015-10-15",
"type": "能源",
"value": 59.7
},
{
"date": "2015-10-15",
"type": "金属",
"value": 62.2
},
{
"date": "2015-10-15",
"type": "农副产品",
"value": 86.8
},
{
"date": "2015-11-15",
"type": "能源",
"value": 55.2
},
{
"date": "2015-11-15",
"type": "金属",
"value": 57.8
},
{
"date": "2015-11-15",
"type": "农副产品",
"value": 85.7
},
{
"date": "2015-12-15",
"type": "能源",
"value": 47.8
},
{
"date": "2015-12-15",
"type": "金属",
"value": 56.3
},
{
"date": "2015-12-15",
"type": "农副产品",
"value": 85.4
},
{
"date": "2016-01-16",
"type": "能源",
"value": 40.5
},
{
"date": "2016-01-16",
"type": "金属",
"value": 55.2
},
{
"date": "2016-01-16",
"type": "农副产品",
"value": 83.5
},
{
"date": "2016-02-16",
"type": "能源",
"value": 41.2
},
{
"date": "2016-02-16",
"type": "金属",
"value": 57.7
},
{
"date": "2016-02-16",
"type": "农副产品",
"value": 84.2
},
{
"date": "2016-03-16",
"type": "能源",
"value": 47.3
},
{
"date": "2016-03-16",
"type": "金属",
"value": 61.2
},
{
"date": "2016-03-16",
"type": "农副产品",
"value": 85.9
},
{
"date": "2016-04-16",
"type": "能源",
"value": 51.1
},
{
"date": "2016-04-16",
"type": "金属",
"value": 62
},
{
"date": "2016-04-16",
"type": "农副产品",
"value": 88.3
},
{
"date": "2016-05-16",
"type": "能源",
"value": 56.6
},
{
"date": "2016-05-16",
"type": "金属",
"value": 60
},
{
"date": "2016-05-16",
"type": "农副产品",
"value": 91.1
},
{
"date": "2016-06-16",
"type": "能源",
"value": 59.4
},
{
"date": "2016-06-16",
"type": "金属",
"value": 60.3
},
{
"date": "2016-06-16",
"type": "农副产品",
"value": 93.8
},
{
"date": "2016-07-16",
"type": "能源",
"value": 56.6
},
{
"date": "2016-07-16",
"type": "金属",
"value": 63.5
},
{
"date": "2016-07-16",
"type": "农副产品",
"value": 91.9
},
{
"date": "2016-08-16",
"type": "能源",
"value": 57.6
},
{
"date": "2016-08-16",
"type": "金属",
"value": 63.8
},
{
"date": "2016-08-16",
"type": "农副产品",
"value": 90.9
},
{
"date": "2016-09-16",
"type": "能源",
"value": 58.2
},
{
"date": "2016-09-16",
"type": "金属",
"value": 62.8
},
{
"date": "2016-09-16",
"type": "农副产品",
"value": 90.5
},
{
"date": "2016-10-16",
"type": "能源",
"value": 63.7
},
{
"date": "2016-10-16",
"type": "金属",
"value": 64.1
},
{
"date": "2016-10-16",
"type": "农副产品",
"value": 89.5
},
{
"date": "2016-11-16",
"type": "能源",
"value": 59.4
},
{
"date": "2016-11-16",
"type": "金属",
"value": 71.5
},
{
"date": "2016-11-16",
"type": "农副产品",
"value": 89.9
},
{
"date": "2016-12-16",
"type": "能源",
"value": 68.4
},
{
"date": "2016-12-16",
"type": "金属",
"value": 73.5
},
{
"date": "2016-12-16",
"type": "农副产品",
"value": 89.4
},
{
"date": "2017-01-17",
"type": "能源",
"value": 68.9
},
{
"date": "2017-01-17",
"type": "金属",
"value": 74.5
},
{
"date": "2017-01-17",
"type": "农副产品",
"value": 91.3
},
{
"date": "2017-02-17",
"type": "能源",
"value": 69.4
},
{
"date": "2017-02-17",
"type": "金属",
"value": 77.9
},
{
"date": "2017-02-17",
"type": "农副产品",
"value": 91.3
},
{
"date": "2017-03-17",
"type": "能源",
"value": 65.3
},
{
"date": "2017-03-17",
"type": "金属",
"value": 77.3
},
{
"date": "2017-03-17",
"type": "农副产品",
"value": 89.2
},
{
"date": "2017-04-17",
"type": "能源",
"value": 67.1
},
{
"date": "2017-04-17",
"type": "金属",
"value": 74
},
{
"date": "2017-04-17",
"type": "农副产品",
"value": 87.7
},
{
"date": "2017-05-17",
"type": "能源",
"value": 64.3
},
{
"date": "2017-05-17",
"type": "金属",
"value": 72.2
},
{
"date": "2017-05-17",
"type": "农副产品",
"value": 88.9
},
{
"date": "2017-06-17",
"type": "能源",
"value": 60.4
},
{
"date": "2017-06-17",
"type": "金属",
"value": 71.7
},
{
"date": "2017-06-17",
"type": "农副产品",
"value": 87.4
},
{
"date": "2017-07-17",
"type": "能源",
"value": 62.3
},
{
"date": "2017-07-17",
"type": "金属",
"value": 75.4
},
{
"date": "2017-07-17",
"type": "农副产品",
"value": 88.1
},
{
"date": "2017-08-17",
"type": "能源",
"value": 65
},
{
"date": "2017-08-17",
"type": "金属",
"value": 81.6
},
{
"date": "2017-08-17",
"type": "农副产品",
"value": 86.5
},
{
"date": "2017-09-17",
"type": "能源",
"value": 68.5
},
{
"date": "2017-09-17",
"type": "金属",
"value": 82.7
},
{
"date": "2017-09-17",
"type": "农副产品",
"value": 87.7
}
] as UTSJSONObject[]
},
}
}
</script>css
<style lang="scss">
</style><style lang="scss">
</style>