Skip to content

A
apaas-ui
Commit 6071aa5f authored by 张俊's avatar 张俊
Browse files
Options

线条封装

parent 0a57ce21
Show whitespace changes
Inline Side-by-side
Showing with 95 additions and 150 deletions
src/components/e-charts/line_chart.vue
View file @ 6071aa5f
......@@ -6,7 +6,7 @@
import uuidv1 from "uuid/v1";
var echarts = require("echarts");
export default {
props: [],
props: ['data'],
components: {},
data() {
return {
......@@ -16,9 +16,11 @@ export default {
watch: {},
computed: {},
created() {},
mounted() {},
mounted() {
this.init_line_charts(this.data.xaxis,this.data.data)
},
methods: {
init_line_charts() {
init_line_charts(xAxisData,yarr) {
let bgColor = "#fff";
let color = [
"#0090FF",
......@@ -28,73 +30,76 @@ export default {
"#8B5CFF",
"#00CA69",
];
let echartData = [
const hexToRgba = (hex, opacity) => {
let rgbaColor = "";
let reg = /^#[\da-f]{6}$/i;
if (reg.test(hex)) {
rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
"0x" + hex.slice(3, 5)
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
}
return rgbaColor;
};
var series = []
yarr.forEach((e,idx) => {
series.push(
{
name: "1",
value1: 100,
value2: 233,
name: e.name,
type: "line",
smooth: true,
showSymbol: false,
// symbolSize: 8,
zlevel: 3,
lineStyle: {
normal: {
color: color[idx],
shadowBlur: 5,
shadowColor: hexToRgba(color[idx], 0.5),
shadowOffsetY: 10,
},
{
name: "2",
value1: 138,
value2: 233,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
name: "3",
value1: 350,
value2: 200,
offset: 0,
color: hexToRgba(color[idx], 0.3),
},
{
name: "4",
value1: 173,
value2: 180,
offset: 1,
color: hexToRgba(color[idx], 0.1),
},
{
name: "5",
value1: 180,
value2: 199,
],
false
),
shadowColor: hexToRgba(color[idx], 0.1),
shadowBlur: 10,
},
{
name: "6",
value1: 150,
value2: 233,
},
{
name: "7",
value1: 180,
value2: 210,
emphasis: {
itemStyle: {
borderWidth: 5,
},
{
name: "8",
value1: 230,
value2: 180,
},
];
let xAxisData = echartData.map((v) => v.name);
//  ["1", "2", "3", "4", "5", "6", "7", "8"]
let yAxisData1 = echartData.map((v) => v.value1);
// [100, 138, 350, 173, 180, 150, 180, 230]
let yAxisData2 = echartData.map((v) => v.value2);
// [233, 233, 200, 180, 199, 233, 210, 180]
const hexToRgba = (hex, opacity) => {
let rgbaColor = "";
let reg = /^#[\da-f]{6}$/i;
if (reg.test(hex)) {
rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
"0x" + hex.slice(3, 5)
)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
}
return rgbaColor;
};
data: e.arr,
},
)
});
option = {
var option = {
backgroundColor: bgColor,
color: color,
legend: {
// show:false,//是否显示图例
right: "center",
bottom: 10,
bottom: 0,
itemWidth: 10,
itemHeight: 10,
icon: "roundRect",
......@@ -111,7 +116,10 @@ export default {
},
},
grid: {
top: 100,
top: 10,
left:10,
right:10,
bottom:30,
containLabel: true,
},
xAxis: [
......@@ -167,102 +175,18 @@ export default {
},
},
],
series: [
{
name: "2018",
type: "line",
smooth: true,
showSymbol: false,
// symbolSize: 8,
zlevel: 3,
lineStyle: {
normal: {
color: color[0],
shadowBlur: 5,
shadowColor: hexToRgba(color[0], 0.5),
shadowOffsetY: 10,
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: hexToRgba(color[0], 0.3),
},
{
offset: 1,
color: hexToRgba(color[0], 0.1),
},
],
false
),
shadowColor: hexToRgba(color[0], 0.1),
shadowBlur: 10,
},
},
emphasis: {
itemStyle: {
borderWidth: 4,
},
},
data: yAxisData1,
},
{
name: "2019",
type: "line",
smooth: true,
showSymbol: false,
// symbolSize: 8,
zlevel: 3,
lineStyle: {
normal: {
color: color[1],
shadowBlur: 5,
shadowColor: hexToRgba(color[1], 0.5),
shadowOffsetY: 10,
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: hexToRgba(color[1], 0.3),
},
{
offset: 1,
color: hexToRgba(color[1], 0.1),
},
],
false
),
shadowColor: hexToRgba(color[1], 0.1),
shadowBlur: 10,
},
},
emphasis: {
itemStyle: {
borderWidth: 4,
},
},
data: yAxisData2,
},
],
series: series,
};
window[this.line] = echarts.init(document.getElementById(this.line));
window[this.line].setOption(option, true);
},
},
};
</script>
<style scoped></style>
<style scoped>
.dashboard {
width: 100%;
height: 100%;
}
</style>
src/pages/data-analysis/my-service.vue
View file @ 6071aa5f
......@@ -30,7 +30,9 @@
<block-radius class="block"></block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius class="block"></block-radius>
<block-radius class="block">
<line-chart :data="line_data"></line-chart>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius class="block">
......@@ -76,6 +78,7 @@ import BlockRadius from "@/components/general/block-radius";
import Dashboard from "@/components/e-charts/dashboard";
import multipleCircle from '@/components/e-charts/multiple_circle'
import singleCircle from '@/components/e-charts/single_circle'
import lineChart from '@/components/e-charts/line_chart'
import Toplist from "@/components/e-charts/toplist";
import Starlist from "@/components/e-charts/starlist";
export default {
......@@ -85,7 +88,8 @@ export default {
multipleCircle,
singleCircle,
Toplist,
Starlist
Starlist,
lineChart
},
data: () => ({
navList: [],
......@@ -99,6 +103,23 @@ export default {
num:12,
color:'#515fe7',
text:'共享'
},
line_data:{
xaxis:['01-01','01-02','01-03','01-04','01-05','01-06','01-07','01-08'],
data:[
{
name:'开发者应用',
arr:[100,120,130,150,160,120,110,100]
},
{
name:'平台应用',
arr:[120,130,140,130,140,120,100,90]
},
{
name:'未上架',
arr:[80,90,100,110,100,70,80,90]
},
],
}
}),
mounted() {},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment