测试Demo代码~~

export default {

itemStyleArr: [
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#d7f4f8' // 0% 处的颜色
},
{
offset: 0.5,
color: '#b8eff7' // 100% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}, // 背景渐变色
lineStyle: {
normal: {
color: '#4fd6d2', // 图例的颜色
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#4fd6d2'
}
}
},
emphasis: {
color: '#4fd6d2',
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'dotted',
color: '#4fd6d2' // 折线的颜色
}
}
}, // 线条样式1
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#81befd' // 0% 处的颜色
},
{
offset: 0.4,
color: '#bad7f5' // 100% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}, // 背景渐变色
lineStyle: {
normal: {
color: '#0180ff', // 图例的颜色
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#0180ff'
}
}
},
emphasis: {
color: '#0180ff',
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'dotted',
color: '0180ff'
}
}
}, // 线条样式2
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#b581fd' // 0% 处的颜色
},
{
offset: 0.4,
color: '#f9e4ff' // 40% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}, // 背景渐变色
lineStyle: {
normal: {
color: '#b581fd', // 图例的颜色
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#b581fd'
}
}
},
emphasis: {
color: 'red',
lineStyle: {
// 系列级个性化折线样式
width: 1,
type: 'dotted',
color: 'red'
}
}
}, // 线条样式3
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#6699FF' // 0% 处的颜色
},
{
offset: 0.4,
color: '#9ebbf5' // 100% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}, // 背景渐变色
lineStyle: {
normal: {
color: '#6699FF', // 图例的颜色
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#6699FF'
}
}
},
emphasis: {
color: '#6699FF',
lineStyle: {
// 系列级个性化折线样式
width: 1,
type: 'dotted',
color: '#6699FF'
}
}
}, // 线条样式4
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#FF99FF' // 0% 处的颜色
},
{
offset: 0.4,
color: '#f7d2f7' // 100% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}, // 背景渐变色
lineStyle: {
normal: {
color: '#FF99FF', // 图例的颜色
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#FF99FF'
}
}
},
emphasis: {
color: '#FF99FF',
lineStyle: {
// 系列级个性化折线样式
width: 1,
type: 'dotted',
color: '#FF99FF'
}
}
}, // 线条样式5
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#2d2df7' // 0% 处的颜色
},
{
offset: 0.4,
color: '#9898f7' // 100% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}, // 背景渐变色
lineStyle: {
normal: {
color: '#2d2df7', // 图例的颜色
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#2d2df7'
}
}
},
emphasis: {
color: '#2d2df7',
lineStyle: {
// 系列级个性化折线样式
width: 1,
type: 'dotted',
color: '#2d2df7'
}
}
}, // 线条样式6
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#7a4ffb' // 0% 处的颜色
},
{
offset: 0.4,
color: '#beacf5' // 100% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}, // 背景渐变色
lineStyle: {
normal: {
color: '#7a4ffb', // 图例的颜色
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#7a4ffb'
}
}
},
emphasis: {
color: '#7a4ffb',
lineStyle: {
// 系列级个性化折线样式
width: 1,
type: 'dotted',
color: '#7a4ffb'
}
}
}, // 线条样式7
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#cc3399' // 0% 处的颜色
},
{
offset: 0.4,
color: '#d08cb9' // 100% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}, // 背景渐变色
lineStyle: {
normal: {
color: '#cc3399', // 图例的颜色
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#cc3399'
}
}
},
emphasis: {
color: '#cc3399',
lineStyle: {
// 系列级个性化折线样式
width: 1,
type: 'dotted',
color: '#cc3399'
}
}
}, // 线条样式8
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#ce3df3' // 0% 处的颜色
},
{
offset: 0.4,
color: '#df9cf1' // 100% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}, // 背景渐变色
lineStyle: {
normal: {
color: '#ce3df3', // 图例的颜色
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#ce3df3'
}
}
},
emphasis: {
color: '#ce3df3',
lineStyle: {
// 系列级个性化折线样式
width: 1,
type: 'dotted',
color: '#ce3df3'
}
}
}, // 线条样式9
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#ff6666' // 0% 处的颜色
},
{
offset: 0.4,
color: '#f3a0a0' // 100% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}, // 背景渐变色
lineStyle: {
normal: {
color: '#ff6666', // 图例的颜色
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#ff6666'
}
}
},
emphasis: {
color: '#ff6666',
lineStyle: {
// 系列级个性化折线样式
width: 1,
type: 'dotted',
color: '#ff6666'
}
}
}, // 线条样式10
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#f7aa37' // 0% 处的颜色
},
{
offset: 0.4,
color: '#f1bf75' // 100% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}, // 背景渐变色
lineStyle: {
normal: {
color: '#f7aa37', // 图例的颜色
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#f7aa37'
}
}
},
emphasis: {
color: '#f7aa37',
lineStyle: {
// 系列级个性化折线样式
width: 1,
type: 'dotted',
color: '#f7aa37'
}
}
}, // 线条样式11
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#ffcc33' // 0% 处的颜色
},
{
offset: 0.4,
color: '#f5d77e' // 100% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}, // 背景渐变色
lineStyle: {
normal: {
color: '#ffcc33', // 图例的颜色
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#ffcc33'
}
}
},
emphasis: {
color: '#ffcc33',
lineStyle: {
// 系列级个性化折线样式
width: 1,
type: 'dotted',
color: '#ffcc33'
}
}
}, // 线条样式12
{
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#efef33' // 0% 处的颜色
},
{
offset: 0.4,
color: '#fbfb87' // 100% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
],
global: false // 缺省为 false
}, // 背景渐变色
lineStyle: {
normal: {
color: '#efef33', // 图例的颜色
lineStyle: {
// 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#efef33'
}
}
},
emphasis: {
color: '#efef33',
lineStyle: {
// 系列级个性化折线样式
width: 1,
type: 'dotted',
color: '#efef33'
}
}
} // 线条样式11
]
};