目录
添加公共方法src/assets/js/getEchartsData.js
使用前准备
- npm install echarts --save
- ECharts 在线构建 定制 echarts 的样式 主题下载→json版本→复制
- 创建assets/js/theme.js文件 const常量=复制出的json export {常量1,常量2}
- 例:
const black =
{
"color": [
"#fc97af",
"#87f7cf",
"#f7f494",
"#72ccff",
"#f7c5a0",
"#d4a4eb",
"#d2f5a6",
"#76f2f2"
],
"backgroundColor": "rgba(41,52,65,0)",
"textStyle": {},
"title": {
"textStyle": {
"color": "#ffffff"
},
"subtextStyle": {
"color": "#dddddd"
}
},
"line": {
"itemStyle": {
"borderWidth": "4"
},
"lineStyle": {
"width": "3"
},
"symbolSize": "0",
"symbol": "circle",
"smooth": true
},
"radar": {
"itemStyle": {
"borderWidth": "4"
},
"lineStyle": {
"width": "3"
},
"symbolSize": "0",
"symbol": "circle",
"smooth": true
},
"bar": {
"itemStyle": {
"barBorderWidth": 0,
"barBorderColor": "#ccc"
}
},
"pie": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"scatter": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"boxplot": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"parallel": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"sankey": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"funnel": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"gauge": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"candlestick": {
"itemStyle": {
"color": "#fc97af",
"color0": "transparent",
"borderColor": "#fc97af",
"borderColor0": "#87f7cf",
"borderWidth": "2"
}
},
"graph": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"lineStyle": {
"width": "1",
"color": "#ffffff"
},
"symbolSize": "0",
"symbol": "circle",
"smooth": true,
"color": [
"#fc97af",
"#87f7cf",
"#f7f494",
"#72ccff",
"#f7c5a0",
"#d4a4eb",
"#d2f5a6",
"#76f2f2"
],
"label": {
"color": "#293441"
}
},
"map": {
"itemStyle": {
"areaColor": "#f3f3f3",
"borderColor": "#999999",
"borderWidth": 0.5
},
"label": {
"color": "#893448"
},
"emphasis": {
"itemStyle": {
"areaColor": "rgba(255,178,72,1)",
"borderColor": "#eb8146",
"borderWidth": 1
},
"label": {
"color": "rgb(137,52,72)"
}
}
},
"geo": {
"itemStyle": {
"areaColor": "#f3f3f3",
"borderColor": "#999999",
"borderWidth": 0.5
},
"label": {
"color": "#893448"
},
"emphasis": {
"itemStyle": {
"areaColor": "rgba(255,178,72,1)",
"borderColor": "#eb8146",
"borderWidth": 1
},
"label": {
"color": "rgb(137,52,72)"
}
}
},
"categoryAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#757575"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"color": "#d6d6d6"
},
"splitLine": {
"show": false,
"lineStyle": {
"color": [
"#e6e6e6"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"valueAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#757575"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"color": "#d6d6d6"
},
"splitLine": {
"show": false,
"lineStyle": {
"color": [
"#e6e6e6"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"logAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#757575"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"color": "#d6d6d6"
},
"splitLine": {
"show": false,
"lineStyle": {
"color": [
"#e6e6e6"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"timeAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#757575"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"color": "#d6d6d6"
},
"splitLine": {
"show": false,
"lineStyle": {
"color": [
"#e6e6e6"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"toolbox": {
"iconStyle": {
"borderColor": "#999999"
},
"emphasis": {
"iconStyle": {
"borderColor": "#666666"
}
}
},
"legend": {
"textStyle": {
"color": "#d6d6d6"
}
},
"tooltip": {
"axisPointer": {
"lineStyle": {
"color": "#cccccc",
"width": 1
},
"crossStyle": {
"color": "#cccccc",
"width": 1
}
}
},
"timeline": {
"lineStyle": {
"color": "#87f7cf",
"width": 1
},
"itemStyle": {
"color": "#87f7cf",
"borderWidth": 1
},
"controlStyle": {
"color": "#87f7cf",
"borderColor": "#87f7cf",
"borderWidth": 0.5
},
"checkpointStyle": {
"color": "#fc97af",
"borderColor": "#fc97af"
},
"label": {
"color": "#87f7cf"
},
"emphasis": {
"itemStyle": {
"color": "#f7f494"
},
"controlStyle": {
"color": "#87f7cf",
"borderColor": "#87f7cf",
"borderWidth": 0.5
},
"label": {
"color": "#87f7cf"
}
}
},
"visualMap": {
"color": [
"#fc97af",
"#87f7cf"
]
},
"dataZoom": {
"backgroundColor": "rgba(255,255,255,0)",
"dataBackgroundColor": "rgba(114,204,255,1)",
"fillerColor": "rgba(114,204,255,0.2)",
"handleColor": "#72ccff",
"handleSize": "100%",
"textStyle": {
"color": "#333333"
}
},
"markPoint": {
"label": {
"color": "#293441"
},
"emphasis": {
"label": {
"color": "#293441"
}
}
}
}
const light =
{
"color": [
"#516b91",
"#59c4e6",
"#edafda",
"#93b7e3",
"#a5e7f0",
"#cbb0e3"
],
"backgroundColor": "rgba(0,0,0,0)",
"textStyle": {},
"title": {
"textStyle": {
"color": "#516b91"
},
"subtextStyle": {
"color": "#93b7e3"
}
},
"line": {
"itemStyle": {
"borderWidth": "2"
},
"lineStyle": {
"width": "2"
},
"symbolSize": "6",
"symbol": "emptyCircle",
"smooth": true
},
"radar": {
"itemStyle": {
"borderWidth": "2"
},
"lineStyle": {
"width": "2"
},
"symbolSize": "6",
"symbol": "emptyCircle",
"smooth": true
},
"bar": {
"itemStyle": {
"barBorderWidth": 0,
"barBorderColor": "#ccc"
}
},
"pie": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"scatter": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"boxplot": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"parallel": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"sankey": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"funnel": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"gauge": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"candlestick": {
"itemStyle": {
"color": "#edafda",
"color0": "transparent",
"borderColor": "#d680bc",
"borderColor0": "#8fd3e8",
"borderWidth": "2"
}
},
"graph": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"lineStyle": {
"width": 1,
"color": "#aaaaaa"
},
"symbolSize": "6",
"symbol": "emptyCircle",
"smooth": true,
"color": [
"#516b91",
"#59c4e6",
"#edafda",
"#93b7e3",
"#a5e7f0",
"#cbb0e3"
],
"label": {
"color": "#eeeeee"
}
},
"map": {
"itemStyle": {
"areaColor": "#f3f3f3",
"borderColor": "#516b91",
"borderWidth": 0.5
},
"label": {
"color": "#000"
},
"emphasis": {
"itemStyle": {
"areaColor": "#a5e7f0",
"borderColor": "#516b91",
"borderWidth": 1
},
"label": {
"color": "#516b91"
}
}
},
"geo": {
"itemStyle": {
"areaColor": "#f3f3f3",
"borderColor": "#516b91",
"borderWidth": 0.5
},
"label": {
"color": "#000"
},
"emphasis": {
"itemStyle": {
"areaColor": "#a5e7f0",
"borderColor": "#516b91",
"borderWidth": 1
},
"label": {
"color": "#516b91"
}
}
},
"categoryAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"color": "#999999"
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"valueAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"color": "#999999"
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"logAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"color": "#999999"
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"timeAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"color": "#999999"
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"toolbox": {
"iconStyle": {
"borderColor": "#999999"
},
"emphasis": {
"iconStyle": {
"borderColor": "#666666"
}
}
},
"legend": {
"textStyle": {
"color": "#999999"
}
},
"tooltip": {
"axisPointer": {
"lineStyle": {
"color": "#cccccc",
"width": 1
},
"crossStyle": {
"color": "#cccccc",
"width": 1
}
}
},
"timeline": {
"lineStyle": {
"color": "#8fd3e8",
"width": 1
},
"itemStyle": {
"color": "#8fd3e8",
"borderWidth": 1
},
"controlStyle": {
"color": "#8fd3e8",
"borderColor": "#8fd3e8",
"borderWidth": 0.5
},
"checkpointStyle": {
"color": "#8fd3e8",
"borderColor": "#8a7ca8"
},
"label": {
"color": "#8fd3e8"
},
"emphasis": {
"itemStyle": {
"color": "#8fd3e8"
},
"controlStyle": {
"color": "#8fd3e8",
"borderColor": "#8fd3e8",
"borderWidth": 0.5
},
"label": {
"color": "#8fd3e8"
}
}
},
"visualMap": {
"color": [
"#516b91",
"#59c4e6",
"#a5e7f0"
]
},
"dataZoom": {
"backgroundColor": "rgba(0,0,0,0)",
"dataBackgroundColor": "rgba(255,255,255,0.3)",
"fillerColor": "rgba(167,183,204,0.4)",
"handleColor": "#a7b7cc",
"handleSize": "100%",
"textStyle": {
"color": "#333"
}
},
"markPoint": {
"label": {
"color": "#eeeeee"
},
"emphasis": {
"label": {
"color": "#eeeeee"
}
}
}
}
export {black,light}
添加公共方法src/assets/js/getEchartsData.js
// getBarData getPieData
export default {
install(Vue) {
//柱状图、折线图数据整理
//data.title-标题
//data.height-高度
//data.type-'line'/'bar'
//data.selected-legend各项选中状态
//data.series-series
//data.name-legend
//data.data-x轴
//data.trigger-提示框同时展示同x轴的数据,可选'item'单独展示
//data.color-背景颜色根据x轴坐标渐变
//data.colorName-渐变背景标题
//data.rotate-x轴文字倾斜度
//data.export-导出表格功能(需后端接口)
//data.seriesColor-一个series内的柱状图不同颜色
//data.barColorList-一个series内的柱状图不同颜色的数组
//data.noShowSymbol,是否不显示折线点
//data.chalk-'black'黑暗主题 'light'亮色
Vue.prototype.getBarData = function(data){
var series = [];
let barColorList = data.barColorList || [
"#5470c6",
"#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc",
"#5470c6",
"#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc",
"#5470c6",
"#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc",
"#5470c6",
"#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc",
"#5470c6",
"#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc",
];
if (!data?.series?.length) {
return;
}
if (data.dataZoom) {
var dataZoom = [
{
show: true,
type: "slider",
startValue: 0,
endValue: data.dataZoom?.end || 5,
},
];
} else {
var dataZoom = [
{
show: false,
},
];
}
let seriesData = {
name: "",
barMaxWidth: 50,
top: data.title ? "10%" : 0,
type: data.type || "line",
symbolSize: 5,
data: [],
smooth: true,
showSymbol: true,
showSymbol: !data.noShowSymbol,
};
if (!data.series.length) return;
for (let i in data.series) {
seriesData.data = data.series[i];
seriesData.name = data.name[i];
if (data.seriesType) {
seriesData.type = data.seriesType[i];
}
series.push({
...seriesData,
});
}
if (data.color) {
series.unshift({
itemStyle: {
color: "#000",
},
name: "",
barMaxWidth: 50,
top: data.title ? "10%" : 0,
type: data.type || "line",
data: [],
smooth: true,
showSymbol: true,
});
let length = data.color.length;
series[0].markArea = {
label: {
position: "inside",
rotate: length > 6 ? -10 : 0,
color: "#000",
},
data: [],
};
data.color.forEach((e, i) => {
let a = 50 + i * (240 / length);
let b = 205 - i * (240 / length);
let c = 125 + i * (120 / length);
this.colorList[e.toString()] = `rgba(${a}, ${c}, ${b}, 0.2)`;
series[0].markArea.data.push([
{
name: data.colorName[i],
xAxis: e,
itemStyle: {
color: `rgba(${a}, ${c}, ${b}, 0.3)`,
},
},
{
xAxis: data.color[i + 1],
},
]);
});
this.$emit("colorList", this.colorList);
}
if (data.seriesColor && series.length == 1) {
// //console.log(series);
for (let i in series[0].data) {
let value = series[0].data[i];
series[0].data[i] = {
value: value,
itemStyle: { color: barColorList[i] },
};
}
// //console.log(series[0].data);
}
let yAxis = {
type: "value",
boundaryGap: [0, 0.01],
splitLine: {
//网格线
show: false,
},
};
if (data.yMin) {
yAxis.min = data.yMin;
}
if (data.yMax) {
yAxis.max = data.yMax;
}
// 指定图表的配置项和数据
var option = {
title: {
text: data.title ? data.title : "",
left: "center",
},
animation: data.animation == false ? data.animation : true,
animationDuration: 5, //这里两个动画设置可以让图表更顺滑
animationEasing: "cubicInOut",
tooltip: {
confine: true,
trigger: data.trigger ? data.trigger : "axis",
show: data.tooltipShow == false ? data.tooltipShow : true,
formatter: function (params, ticket, callback) {
let htmlStr = "";
for (let i = 0; i < params.length; i++) {
let param = params[i];
let xName = param.name; //x轴的名称
let seriesName = param.seriesName; //图例名称
let value = param.value; //y轴值
let color = param.color; //图例颜色
//圆点后面显示的文本
if (value !== "null" && value !== "-") {
if (i === 0) {
htmlStr += xName + "<br/>"; //x轴的名称
}
htmlStr += "<div>";
//为了保证和原来的效果一样,这里自己实现了一个点的效果
htmlStr +=
'<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
color +
';"></span>';
// 文本颜色设置--2020-07-23(需要设置,请解注释下面一行)
//htmlStr += '<span style="color:'+color+'">';
htmlStr += seriesName + ":" + value;
// 文本颜色设置--2020-07-23(需要设置,请解注释下面一行)
//htmlStr += '</span>';
htmlStr += "</div>";
}
}
return htmlStr;
},
},
legend: {
show: data.legendShow == false ? false : true,
type: "scroll",
top: data.title ? "10%" : "0",
left: "center",
selected: data.selected || {},
itemHeight: data.legendHeight || 12,
// textStyle: {
// //图例字体大小
// fontSize: 12,
// },
},
dataZoom: dataZoom,
toolbox: {
show: true,
feature: {
dataView: {
show: false,
readOnly: true,
optionToContent: function (opt) {
if (!opt) return;
let axisData = opt.xAxis[0].data || []; //坐标数据
let series = opt.series || []; //折线图数据
let tdHeads = "<td >时间</td>"; //表头
let tdBodys = ""; //数据
if (!series.length || !axisData.length) return;
series.forEach(function (item) {
//组装表头
tdHeads += `<td >${item.name}</td>`;
});
let table = `<table border="1" ><tbody><tr>${tdHeads} </tr>`;
for (let i = 0, l = axisData.length; i < l; i++) {
for (let j = 0; j < series.length; j++) {
//组装表数据
tdBodys += `<td>${series[j].data[i]}</td>`;
}
table += `<tr><td >${axisData[i]}</td>${tdBodys}</tr>`;
tdBodys = "";
}
table += "</tbody></table>";
return table;
},
},
magicType: {
show: false,
type: ["line", "bar"],
},
restore: {
show: false,
},
myTool1: {
show: data.export ? true : false,
title: "导出",
icon: "path://M996.01 1024H27.99c-7.318 0-13.825-2.837-19.5-8.49-5.653-5.675-8.49-12.16-8.49-19.5 0-8.02 2.837-14.677 8.49-20.01 5.675-5.333 12.16-8 19.5-8h968.02c7.318 0 13.825 2.667 19.5 8 5.653 5.333 8.49 11.99 8.49 20.01 0 7.318-2.837 13.825-8.49 19.5-5.675 5.653-12.16 8.49-19.5 8.49z m-69.013-648c5.334 5.333 7.83 11.99 7.51 20.01-0.342 8-3.84 14.998-10.496 20.993L529.984 811.989l-4.992 2.006-2.987 2.986a44.8 44.8 0 0 1-22.997 0l-2.005-2.986a6.784 6.784 0 0 1-5.014-1.984L97.003 417.003a33.216 33.216 0 0 1-6.998-21.014c0-8 2.496-14.506 7.488-19.498 5.014-4.992 11.84-7.488 20.502-7.488 8.682 0 15.338 2.346 20.01 6.997l347.968 346.005V27.99c0-8 2.496-14.656 7.51-19.989C498.496 2.667 504.66 0 512 0s13.504 2.667 18.496 8c5.013 5.333 7.51 11.99 7.51 20.01v693.974l347.967-345.963c4.672-4.672 11.35-6.997 20.011-6.997s15.659 2.347 20.992 6.997z",
onclick: () => {
this.$emit("exportList");
},
},
},
},
grid: {
top: data.title ? (data.color ? "25%" : "20%") : "10%",
bottom: data.gridBottom ? data.gridBottom : 50,
left: data.yMax
? data.yMin.indexOf("-") != -1
? (data.yMax.length + 2) * 8
: (data.yMax.length + 1) * 8
: 60,
right: 20,
},
xAxis: {
show: data.xAxisShow == false ? data.xAxisShow : true,
type: "category",
data: data.data,
axisTick: {
show: true,
},
axisTick: {
//刻度
show: false,
},
axisLabel: {
show: data.axisShow == false ? data.axisShow : true,
interval: 0,
rotate: data.rotate ? data.rotate : 0,
},
},
yAxis: yAxis,
series: series,
};
return option
},
//饼图数据整理
Vue.prototype.getPieData = function(data){
if (!data?.series?.length) {
return;
}
// 指定图表的配置项和数据
var option = {
title: {
text: data.title || "",
left: "center",
},
tooltip: {
trigger: "item",
},
legend: {
top: data.title&&!data.legendBottom ? "10%" : "auto",
show: data.legendShow == false ? false : true,
type: "scroll",
// orient: 'vertical',
right: 10,
bottom: data.legendBottom?'0':'auto',
},
series: [
{
top: data.title ? "20%" : "0",
type: "pie",
radius:data.radius|| ["45%", "70%"],
itemStyle: {
borderRadius: 10,
borderWidth: 10,
borderColor: "transparent",
},
label: {
show: true,
color:data.chalk=='black'?'#dddddd':'#999999',
textBorderColor:'transparent',
formatter:data.formatter|| "{b}",
},
labelLine: {
//引导线设置
length: 15,
length2: 35,
maxSurfaceAngle: 80,
},
data: data.series,
},
],
};
if (data.colorList) {
option.color = data.colorList;
}
if (data.label) {
option.legend.textStyle = data.label.textStyle;
option.series.forEach((e, i) => {
option.series[i].label = data.label;
});
}
return option
}
}}
在main.js引入
import getEchartsData from '@/assets/js/getEchartsData'
Vue.use(getEchartsData)
使用组件
以下不需要使用前准备
- geo地图