/*
* 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 += "
" + 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}
{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;