You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
422 lines
7.7 KiB
422 lines
7.7 KiB
/* |
|
* uCharts® |
|
* 高性能跨平台图表库，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360）、Vue、Taro等支持canvas的框架平台 |
|
* Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved. |
|
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 ) |
|
* 复制使用请保留本段注释，感谢支持开源！ |
|
* |
|
* uCharts®官方网站 |
|
* https://www.uCharts.cn |
|
* |
|
* 开源地址: |
|
* https://gitee.com/uCharts/uCharts |
|
* |
|
* uni-app插件市场地址： |
|
* http://ext.dcloud.net.cn/plugin?id=271 |
|
* |
|
*/ |
|
|
|
// 通用配置项 |
|
|
|
// 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性 |
|
const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc']; |
|
|
|
const cfe = { |
|
//demotype为自定义图表类型 |
|
"type": ["pie", "ring", "rose", "funnel", "line", "column", "area", "radar", "gauge","candle","demotype"], |
|
//增加自定义图表类型，如果需要categories，请在这里加入您的图表类型例如最后的"demotype" |
|
"categories": ["line", "column", "area", "radar", "gauge", "candle","demotype"], |
|
//instance为实例变量承载属性，option为eopts承载属性，不要删除 |
|
"instance": {}, |
|
"option": {}, |
|
//下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换 |
|
"formatter":{ |
|
"tooltipDemo1":function(res){ |
|
let result = '' |
|
for (let i in res) { |
|
if (i == 0) { |
|
result += res[i].axisValueLabel + '年销售额' |
|
} |
|
let value = '--' |
|
if (res[i].data !== null) { |
|
value = res[i].data |
|
} |
|
// #ifdef H5 |
|
result += '\n' + res[i].seriesName + '：' + value + ' 万元' |
|
// #endif |
|
|
|
// #ifdef APP-PLUS |
|
result += '<br/>' + res[i].marker + res[i].seriesName + '：' + value + ' 万元' |
|
// #endif |
|
} |
|
return result; |
|
}, |
|
legendFormat:function(name){ |
|
return "自定义图例+"+name; |
|
}, |
|
yAxisFormatDemo:function (value, index) { |
|
return value + '元'; |
|
}, |
|
seriesFormatDemo:function(res){ |
|
return res.name + '年' + res.value + '元'; |
|
} |
|
}, |
|
//这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在eopts参数，会将demotype与eopts中option合并后渲染图表。 |
|
"demotype":{ |
|
"color": color, |
|
//在这里填写echarts的option即可 |
|
|
|
}, |
|
//下面是自定义配置，请添加项目所需的通用配置 |
|
"column": { |
|
"color": color, |
|
"title": { |
|
"text": '' |
|
}, |
|
"tooltip": { |
|
"trigger": 'axis' |
|
}, |
|
"grid": { |
|
"top": 30, |
|
"bottom": 50, |
|
"right": 15, |
|
"left": 40 |
|
}, |
|
"legend": { |
|
"bottom": 'left', |
|
}, |
|
"toolbox": { |
|
"show": false, |
|
}, |
|
"xAxis": { |
|
"type": 'category', |
|
"axisLabel": { |
|
"color": '#666666' |
|
}, |
|
"axisLine": { |
|
"lineStyle": { |
|
"color": '#CCCCCC' |
|
} |
|
}, |
|
"boundaryGap": true, |
|
"data": [] |
|
}, |
|
"yAxis": { |
|
"type": 'value', |
|
"axisTick": { |
|
"show": false, |
|
}, |
|
"axisLabel": { |
|
"color": '#666666' |
|
}, |
|
"axisLine": { |
|
"lineStyle": { |
|
"color": '#CCCCCC' |
|
} |
|
}, |
|
}, |
|
"seriesTemplate": { |
|
"name": '', |
|
"type": 'bar', |
|
"data": [], |
|
"barwidth": 20, |
|
"label": { |
|
"show": true, |
|
"color": "#666666", |
|
"position": 'top', |
|
}, |
|
}, |
|
}, |
|
"line": { |
|
"color": color, |
|
"title": { |
|
"text": '' |
|
}, |
|
"tooltip": { |
|
"trigger": 'axis' |
|
}, |
|
"grid": { |
|
"top": 30, |
|
"bottom": 50, |
|
"right": 15, |
|
"left": 40 |
|
}, |
|
"legend": { |
|
"bottom": 'left', |
|
}, |
|
"toolbox": { |
|
"show": false, |
|
}, |
|
"xAxis": { |
|
"type": 'category', |
|
"axisLabel": { |
|
"color": '#666666' |
|
}, |
|
"axisLine": { |
|
"lineStyle": { |
|
"color": '#CCCCCC' |
|
} |
|
}, |
|
"boundaryGap": true, |
|
"data": [] |
|
}, |
|
"yAxis": { |
|
"type": 'value', |
|
"axisTick": { |
|
"show": false, |
|
}, |
|
"axisLabel": { |
|
"color": '#666666' |
|
}, |
|
"axisLine": { |
|
"lineStyle": { |
|
"color": '#CCCCCC' |
|
} |
|
}, |
|
}, |
|
"seriesTemplate": { |
|
"name": '', |
|
"type": 'line', |
|
"data": [], |
|
"barwidth": 20, |
|
"label": { |
|
"show": true, |
|
"color": "#666666", |
|
"position": 'top', |
|
}, |
|
}, |
|
}, |
|
"area": { |
|
"color": color, |
|
"title": { |
|
"text": '' |
|
}, |
|
"tooltip": { |
|
"trigger": 'axis' |
|
}, |
|
"grid": { |
|
"top": 30, |
|
"bottom": 50, |
|
"right": 15, |
|
"left": 40 |
|
}, |
|
"legend": { |
|
"bottom": 'left', |
|
}, |
|
"toolbox": { |
|
"show": false, |
|
}, |
|
"xAxis": { |
|
"type": 'category', |
|
"axisLabel": { |
|
"color": '#666666' |
|
}, |
|
"axisLine": { |
|
"lineStyle": { |
|
"color": '#CCCCCC' |
|
} |
|
}, |
|
"boundaryGap": true, |
|
"data": [] |
|
}, |
|
"yAxis": { |
|
"type": 'value', |
|
"axisTick": { |
|
"show": false, |
|
}, |
|
"axisLabel": { |
|
"color": '#666666' |
|
}, |
|
"axisLine": { |
|
"lineStyle": { |
|
"color": '#CCCCCC' |
|
} |
|
}, |
|
}, |
|
"seriesTemplate": { |
|
"name": '', |
|
"type": 'line', |
|
"data": [], |
|
"areaStyle": {}, |
|
"label": { |
|
"show": true, |
|
"color": "#666666", |
|
"position": 'top', |
|
}, |
|
}, |
|
}, |
|
"pie": { |
|
"color": color, |
|
"title": { |
|
"text": '' |
|
}, |
|
"tooltip": { |
|
"trigger": 'item' |
|
}, |
|
"grid": { |
|
"top": 40, |
|
"bottom": 30, |
|
"right": 15, |
|
"left": 15 |
|
}, |
|
"legend": { |
|
"bottom": 'left', |
|
}, |
|
"seriesTemplate": { |
|
"name": '', |
|
"type": 'pie', |
|
"data": [], |
|
"radius": '50%', |
|
"label": { |
|
"show": true, |
|
"color": "#666666", |
|
"position": 'top', |
|
}, |
|
}, |
|
}, |
|
"ring": { |
|
"color": color, |
|
"title": { |
|
"text": '' |
|
}, |
|
"tooltip": { |
|
"trigger": 'item' |
|
}, |
|
"grid": { |
|
"top": 40, |
|
"bottom": 30, |
|
"right": 15, |
|
"left": 15 |
|
}, |
|
"legend": { |
|
"bottom": 'left', |
|
}, |
|
"seriesTemplate": { |
|
"name": '', |
|
"type": 'pie', |
|
"data": [], |
|
"radius": ['40%', '70%'], |
|
"avoidLabelOverlap": false, |
|
"label": { |
|
"show": true, |
|
"color": "#666666", |
|
"position": 'top', |
|
}, |
|
"labelLine": { |
|
"show": true |
|
}, |
|
}, |
|
}, |
|
"rose": { |
|
"color": color, |
|
"title": { |
|
"text": '' |
|
}, |
|
"tooltip": { |
|
"trigger": 'item' |
|
}, |
|
"legend": { |
|
"top": 'bottom' |
|
}, |
|
"seriesTemplate": { |
|
"name": '', |
|
"type": 'pie', |
|
"data": [], |
|
"radius": "55%", |
|
"center": ['50%', '50%'], |
|
"rosetype": 'area', |
|
}, |
|
}, |
|
"funnel": { |
|
"color": color, |
|
"title": { |
|
"text": '' |
|
}, |
|
"tooltip": { |
|
"trigger": 'item', |
|
"formatter": "{b} : {c}%" |
|
}, |
|
"legend": { |
|
"top": 'bottom' |
|
}, |
|
"seriesTemplate": { |
|
"name": '', |
|
"type": 'funnel', |
|
"left": '10%', |
|
"top": 60, |
|
"bottom": 60, |
|
"width": '80%', |
|
"min": 0, |
|
"max": 100, |
|
"minSize": '0%', |
|
"maxSize": '100%', |
|
"sort": 'descending', |
|
"gap": 2, |
|
"label": { |
|
"show": true, |
|
"position": 'inside' |
|
}, |
|
"labelLine": { |
|
"length": 10, |
|
"lineStyle": { |
|
"width": 1, |
|
"type": 'solid' |
|
} |
|
}, |
|
"itemStyle": { |
|
"bordercolor": '#fff', |
|
"borderwidth": 1 |
|
}, |
|
"emphasis": { |
|
"label": { |
|
"fontSize": 20 |
|
} |
|
}, |
|
"data": [], |
|
}, |
|
}, |
|
"gauge": { |
|
"color": color, |
|
"tooltip": { |
|
"formatter": '{a} <br/>{b} : {c}%' |
|
}, |
|
"seriesTemplate": { |
|
"name": '业务指标', |
|
"type": 'gauge', |
|
"detail": {"formatter": '{value}%'}, |
|
"data": [{"value": 50, "name": '完成率'}] |
|
}, |
|
}, |
|
"candle": { |
|
"xAxis": { |
|
"data": [] |
|
}, |
|
"yAxis": {}, |
|
"color": color, |
|
"title": { |
|
"text": '' |
|
}, |
|
"dataZoom": [{ |
|
"type": 'inside', |
|
"xAxisIndex": [0, 1], |
|
"start": 10, |
|
"end": 100 |
|
}, |
|
{ |
|
"show": true, |
|
"xAxisIndex": [0, 1], |
|
"type": 'slider', |
|
"bottom": 10, |
|
"start": 10, |
|
"end": 100 |
|
} |
|
], |
|
"seriesTemplate": { |
|
"name": '', |
|
"type": 'k', |
|
"data": [], |
|
}, |
|
} |
|
} |
|
|
|
export default cfe; |