代码推送
This commit is contained in:
303
yq/src/util/echarts.js
Normal file
303
yq/src/util/echarts.js
Normal file
@@ -0,0 +1,303 @@
|
||||
//折线图
|
||||
export const line = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
position: function (pt) {
|
||||
return [pt[0], "10%"];
|
||||
},
|
||||
},
|
||||
legend: {},
|
||||
xAxis: {
|
||||
// type: "time",
|
||||
data: [],
|
||||
// boundaryGap: false,
|
||||
// axisLabel: {
|
||||
// formatter: `{yyyy}-{MM}-{dd}`,
|
||||
// },
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
// boundaryGap: [0, "100%"],
|
||||
// axisLabel: {
|
||||
// formatter: function (e) {
|
||||
|
||||
// let value;
|
||||
// if (e > 1000000) {
|
||||
// value = e / 100000;
|
||||
// } else if (e > 100000) {
|
||||
// value = e / 1000;
|
||||
// } else {
|
||||
// value = e / 100;
|
||||
// }
|
||||
// return value;
|
||||
// },
|
||||
// },
|
||||
},
|
||||
{
|
||||
type: "value",
|
||||
// boundaryGap: [0, "100%"],
|
||||
show: false,
|
||||
},
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
type: "inside",
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "1",
|
||||
type: "line",
|
||||
smooth: false,
|
||||
symbol: "circle",
|
||||
showSymbol: false,
|
||||
symbolSize: 5,
|
||||
// areaStyle: {},
|
||||
itemStyle: {
|
||||
color: "#f7931a",
|
||||
borderColor: "rgba(221,220,107,0.1)",
|
||||
borderWidth: 12,
|
||||
},
|
||||
lineStyle: {
|
||||
//线条样式
|
||||
color: "#f7931a",
|
||||
width: "1",
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
{
|
||||
name: "发送地址数",
|
||||
type: "line",
|
||||
smooth: false,
|
||||
symbol: "circle",
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
// areaStyle: {},
|
||||
itemStyle: {
|
||||
color: "#008acc",
|
||||
borderColor: "rgba(221,220,107,0.1)",
|
||||
borderWidth: 12,
|
||||
},
|
||||
lineStyle: {
|
||||
//线条样式
|
||||
color: "#008acc",
|
||||
width: "1",
|
||||
},
|
||||
yAxisIndex: 1,
|
||||
data: [],
|
||||
//绘制右侧Y轴
|
||||
markLine: {
|
||||
symbol: ["none", "none"], //去掉箭头
|
||||
itemStyle: {
|
||||
normal: {
|
||||
lineStyle: { type: "solid", color: "rgba(0,0,0,0.01)" },
|
||||
},
|
||||
},
|
||||
// lineStyle:{
|
||||
// color:"red"
|
||||
// },
|
||||
|
||||
label: {
|
||||
formatter: "{b}",
|
||||
fontSize: 10,
|
||||
color: "rgba(0,0,0,0.8)",
|
||||
align: "left",
|
||||
},
|
||||
data: [
|
||||
{
|
||||
name: "0",
|
||||
yAxis: 0,
|
||||
},
|
||||
// {
|
||||
// name: "$40W",
|
||||
// yAxis: 400000,
|
||||
// },
|
||||
{
|
||||
name: "$70W",
|
||||
yAxis: 700000,
|
||||
},
|
||||
{
|
||||
name: "$40W",
|
||||
yAxis: 400000,
|
||||
},
|
||||
|
||||
{
|
||||
name: "$10W",
|
||||
yAxis: 100000,
|
||||
},
|
||||
{
|
||||
name: "$100W",
|
||||
yAxis: 1000000,
|
||||
// position: ['100%', '50'],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "日交易量",
|
||||
type: "line",
|
||||
smooth: false,
|
||||
symbol: "circle",
|
||||
symbolSize: 5,
|
||||
showSymbol: false,
|
||||
// areaStyle: {},
|
||||
itemStyle: {
|
||||
color: "#666666",
|
||||
borderColor: "rgba(221,220,107,0.1)",
|
||||
borderWidth: 12,
|
||||
},
|
||||
lineStyle: {
|
||||
//线条样式
|
||||
color: "#666666",
|
||||
width: "1",
|
||||
},
|
||||
data: [],
|
||||
},
|
||||
],
|
||||
|
||||
}
|
||||
|
||||
//小折线图
|
||||
export const minLine = {
|
||||
|
||||
xAxis: {
|
||||
boundaryGap: false,
|
||||
show:false,
|
||||
axisLine: { onZero: false },
|
||||
axisTick: { show: false },
|
||||
axisLabel: { show: false, interval: 0 },
|
||||
data: [],
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
// type:"value",
|
||||
show:false,
|
||||
scale: true,
|
||||
position: 'right',
|
||||
axisLine: { show: false },
|
||||
axisTick: { show: false },
|
||||
splitLine: { show: false},
|
||||
axisLabel: { inside: false,interval: 0 }
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: "inside",
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
grid:{
|
||||
top:1,
|
||||
bottom:3,
|
||||
left:3,
|
||||
right:3,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Fake Data',
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
lineStyle: {
|
||||
color: "#d84d65"
|
||||
},
|
||||
data: []
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
//柱状图
|
||||
export const bar = {
|
||||
title: {
|
||||
text: "",
|
||||
left: "center",
|
||||
textStyle: {
|
||||
fontSize: 15,
|
||||
fontWeight: "normal"
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
textStyle: {
|
||||
align: "left",
|
||||
},
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
crossStyle: {
|
||||
color: "#999",
|
||||
},
|
||||
},
|
||||
// formatter: function (params) {
|
||||
// var res = params[0].axisValueLabel;
|
||||
|
||||
// for (let i = 0; i <= params.length - 1; i++) {
|
||||
// res += `</br>${params[i].marker} <span style="font-weight: bold">${params[i].value[1]}</span> ${params[i].seriesName}`;
|
||||
// }
|
||||
// return "111";
|
||||
// },
|
||||
},
|
||||
|
||||
legend: {
|
||||
right: 100,
|
||||
formatter: function (name) {
|
||||
|
||||
return name;
|
||||
},
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: [],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
// name: "Precipitation",
|
||||
// min: 0,
|
||||
// max: 250,
|
||||
// interval: 50,
|
||||
axisLabel: {
|
||||
formatter: function (value) {
|
||||
|
||||
let label = value / 1000000
|
||||
return `${label}M`
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
],
|
||||
series: [
|
||||
{
|
||||
|
||||
type: "bar",
|
||||
colorBy: "data",
|
||||
// tooltip: {
|
||||
// valueFormatter: function (value) {
|
||||
// return value + " ml";
|
||||
// },
|
||||
// },
|
||||
data: [],
|
||||
itemStyle: {
|
||||
color: "#fdaa56",
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "bar",
|
||||
itemStyle: {
|
||||
color: "#607d8b",
|
||||
},
|
||||
|
||||
data: [],
|
||||
},
|
||||
],
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user