Skip to content

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

线条封装

parent 0a57ce21
Hide 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 @@ ...@@ -6,7 +6,7 @@
import uuidv1 from "uuid/v1"; import uuidv1 from "uuid/v1";
var echarts = require("echarts"); var echarts = require("echarts");
export default { export default {
props: [], props: ['data'],
components: {}, components: {},
data() { data() {
return { return {
...@@ -16,9 +16,11 @@ export default { ...@@ -16,9 +16,11 @@ export default {
watch: {}, watch: {},
computed: {}, computed: {},
created() {}, created() {},
mounted() {}, mounted() {
this.init_line_charts(this.data.xaxis,this.data.data)
},
methods: { methods: {
init_line_charts() { init_line_charts(xAxisData,yarr) {
let bgColor = "#fff"; let bgColor = "#fff";
let color = [ let color = [
"#0090FF", "#0090FF",
...@@ -28,55 +30,6 @@ export default { ...@@ -28,55 +30,6 @@ export default {
"#8B5CFF", "#8B5CFF",
"#00CA69", "#00CA69",
]; ];
let echartData = [
{
name: "1",
value1: 100,
value2: 233,
},
{
name: "2",
value1: 138,
value2: 233,
},
{
name: "3",
value1: 350,
value2: 200,
},
{
name: "4",
value1: 173,
value2: 180,
},
{
name: "5",
value1: 180,
value2: 199,
},
{
name: "6",
value1: 150,
value2: 233,
},
{
name: "7",
value1: 180,
value2: 210,
},
{
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) => { const hexToRgba = (hex, opacity) => {
let rgbaColor = ""; let rgbaColor = "";
let reg = /^#[\da-f]{6}$/i; let reg = /^#[\da-f]{6}$/i;
...@@ -88,13 +41,65 @@ export default { ...@@ -88,13 +41,65 @@ export default {
return rgbaColor; return rgbaColor;
}; };
option = { var series = []
yarr.forEach((e,idx) => {
series.push(
{
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,
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: hexToRgba(color[idx], 0.3),
},
{
offset: 1,
color: hexToRgba(color[idx], 0.1),
},
],
false
),
shadowColor: hexToRgba(color[idx], 0.1),
shadowBlur: 10,
},
},
emphasis: {
itemStyle: {
borderWidth: 5,
},
},
data: e.arr,
},
)
});
var option = {
backgroundColor: bgColor, backgroundColor: bgColor,
color: color, color: color,
legend: { legend: {
// show:false,//是否显示图例 // show:false,//是否显示图例
right: "center", right: "center",
bottom: 10, bottom: 0,
itemWidth: 10, itemWidth: 10,
itemHeight: 10, itemHeight: 10,
icon: "roundRect", icon: "roundRect",
...@@ -111,7 +116,10 @@ export default { ...@@ -111,7 +116,10 @@ export default {
}, },
}, },
grid: { grid: {
top: 100, top: 10,
left:10,
right:10,
bottom:30,
containLabel: true, containLabel: true,
}, },
xAxis: [ xAxis: [
...@@ -167,102 +175,18 @@ export default { ...@@ -167,102 +175,18 @@ export default {
}, },
}, },
], ],
series: [ series: 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,
},
],
}; };
window[this.line] = echarts.init(document.getElementById(this.line));
window[this.line].setOption(option, true);
}, },
}, },
}; };
</script> </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 @@ ...@@ -30,7 +30,9 @@
<block-radius class="block"></block-radius> <block-radius class="block"></block-radius>
</el-col> </el-col>
<el-col :span="24" class="in_block"> <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>
<el-col :span="24" class="in_block"> <el-col :span="24" class="in_block">
<block-radius class="block"> <block-radius class="block">
...@@ -76,6 +78,7 @@ import BlockRadius from "@/components/general/block-radius"; ...@@ -76,6 +78,7 @@ import BlockRadius from "@/components/general/block-radius";
import Dashboard from "@/components/e-charts/dashboard"; import Dashboard from "@/components/e-charts/dashboard";
import multipleCircle from '@/components/e-charts/multiple_circle' import multipleCircle from '@/components/e-charts/multiple_circle'
import singleCircle from '@/components/e-charts/single_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 Toplist from "@/components/e-charts/toplist";
import Starlist from "@/components/e-charts/starlist"; import Starlist from "@/components/e-charts/starlist";
export default { export default {
...@@ -85,7 +88,8 @@ export default { ...@@ -85,7 +88,8 @@ export default {
multipleCircle, multipleCircle,
singleCircle, singleCircle,
Toplist, Toplist,
Starlist Starlist,
lineChart
}, },
data: () => ({ data: () => ({
navList: [], navList: [],
...@@ -99,6 +103,23 @@ export default { ...@@ -99,6 +103,23 @@ export default {
num:12, num:12,
color:'#515fe7', color:'#515fe7',
text:'共享' 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() {}, 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