vue中使用的echarts相关图表，南丁格尔玫瑰图，饼状图，正负条形图，折线条形图，折线图配合颜色渐变，希望能帮到你。
1.南丁格尔玫瑰图
//今日客流到访数
dayVisited() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("dayVisited"));
let option = {
title: {
text: "今日客流到访数",
subtext: "截至时间",
subtextStyle: {
left: "center", //主副标题的水平位置
top: "center" //主副标题的垂直位置
},
x: "left",
top: 10,
left: 10,
textStyle: {
fontSize: 16,
color: "rgba(51,51,51,1)"
}
},
tooltip: {
trigger: "item",
formatter: "{a}
{b} : {c} ({d})"
},
legend: {
type: "scroll",
orient: "vertical",
right: 10,
top: 20,
bottom: 20,
x: "right",
y: "center",
itemWidth: 4,
itemHeight: 16,
//图例文字样式
textStyle: {
color: "#000",
fontSize: 14,
fontWeight: "700"
},
data: ["1次占比", "2次占比", "3次占比", "4次占比", "5次占比"]
},
toolbox: {
show: false
},
calculable: true,
color: ["#5B9CEC", "#CF5BEC", "#FFA200", "#FF5C95", "#1BD6DA"], //自己设置扇形图颜色
series: [
{
name: "今日客流到访数",
type: "pie",
radius: [60, 110],
center: ["40%", 200],
roseType: "radius",
x: "50%", // for funnel
max: 50, // for funnel
sort: "ascending", // for funnel
data: [
{ value: 40, name: "1次占比" },
{ value: 30, name: "2次占比" },
{ value: 25, name: "3次占比" },
{ value: 5, name: "4次占比" },
{ value: 2, name: "5次占比" }
],
//标线的属性设置，以及显示的文字
itemStyle: {
normal: {
label: {
show: true,
formatter: "{c}次"
// textStyle: {
// color: "#000",
// fontSize: 14,
// fontWeight: "700"
// }
}
//标线长度，宽度
// labelLine: {
// show: true,
// length: 40,
// lineStyle: {
// width: 2
// }
// }
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
};
myChart.setOption(option);
},
2.饼状图
//客户类型
customerType() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(“equipmentNum”));
let option = {
backgroundColor: “#fff”,
title: {
text: "客户类型",
left: "20",
top: 10,
textStyle: {
fontSize: 16,
color: "#333333"
}
},
legend: {
type: "scroll",
orient: "vertical",
right: 10,
top: 20,
bottom: 20,
x: "right",
y: "center",
itemWidth: 4,
itemHeight: 16,
//图例文字样式
textStyle: {
color: "#000",
fontSize: 14,
fontWeight: "700"
},
data: ["新用户", "老用户"]
},
tooltip: {
trigger: "item",
formatter: "{a}
{b} : {c} ({d}%)"
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series: [
{
name: "访问来源",
type: "pie",
radius: "55%",
center: ["50%", "50%"],
data: [
{ value: 335, name: "新用户", itemStyle: { color: "#5B9CEC" } },
{ value: 310, name: "老用户", itemStyle: { color: "#FF5C95" } }
],
roseType: "radius",
label: {
normal: {
textStyle: {
color: "#5B9CEC"
}
}
},
labelLine: {
normal: {
lineStyle: {
color: "#FF5C95"
},
smooth: 0.2,
length: 10,
length2: 20
}
},
itemStyle: {
normal: {
color: "#c23531",
shadowBlur: 200,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
},
animationType: "scale",
animationEasing: "elasticOut",
animationDelay: function(idx) {
return Math.random() * 200;
}
}
]
};
myChart.setOption(option);
},
3.正负条形图
//年龄分布
yearNum() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("center_data"));
let option = {
title: {
padding: 5, //padding: [5,5,5,5],标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
top: "2%",
text: "年龄分布",
// subtext: '(纵向为人/次，横向为时间)',
x: "left",
left: 20,
textStyle: {
fontSize: 16,
color: "rgba(51,51,51,1)"
}
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
type: "scroll",
orient: "vertical",
right: 10,
top: 20,
bottom: 20,
data: ["男", "女"],
itemWidth: 4,
itemHeight: 16,
top: 20,
x: "right"
},
grid: {
left: "10%",
right: "5%",
bottom: "3%",
containLabel: true
},
xAxis: [
{
type: "value",
show: true
}
],
yAxis: [
{
type: "category",
axisTick: {
show: false
}
}
],
series: [
{
name: "女",
type: "bar",
stack: "总量", //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
barWidth: "30",
barGap: "0%", //两个柱子距离
// label: {
// normal: {
// show: false
// }
// },
itemStyle: {
normal: {
//这里用函数控制柱子颜色，定义一个list，然后根据所以取得不同的值
color: ["#FF5C95"],
label: {
show: false
// position: 'top',
// formatter: '{b}\n{c}'
}
}
},
data: [320, 302, 341, 374, 390, 450, 420]
},
{
name: "男",
type: "bar",
stack: "总量", //数据堆叠，同个类目轴上系列配置相同的stack值可以堆叠放置。
barWidth: 30,
barGap: "50%", //两个柱子距离
label: {
normal: {
show: false
// position: "left"
}
},
itemStyle: {
normal: {
//这里用函数控制柱子颜色，定义一个list，然后根据所以取得不同的值
color: ["#5B9CEC "],
label: {
show: false
// position: 'top',
// formatter: '{b}\n{c}'
}
}
},
data: [-120, -132, -101, -134, -190, -230, -210]
}
]
};
myChart.setOption(option);
},
4.折线条形图
//今日客流量
customerToday() {
var myChart = echarts.init(document.getElementById("footer_data"));
var option = {
title: {
left: "20",
top: "20",
text: "今日客流量",
show: true
},
tooltip: {
trigger: "axis",
formatter: "{a}:{c}",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999"
}
}
},
grid: {
show: false,
top: "100",
bottom: "60",
right: "60",
left: "200"
},
legend: {
show: true,
// selectedMode:'single', //设置显示单一图例的图形，点击可切换
itemGap: 10,
data: ["今日", "昨天"],
inactiveColor: "#ccc",
type: "scroll",
orient: "vertical",
right: 10,
top: 20,
bottom: 20,
x: "right",
y: "center",
itemWidth: 25,
itemHeight: 10,
// 图例文字样式
textStyle: {
color: "#000",
fontSize: 14,
fontWeight: "700"
}
},
xAxis: [
{
type: "category",
data: [
"济南",
"青岛",
"烟台",
"威海",
"潍坊",
"东营",
"日照",
"滨州",
"莱芜",
"淄博",
"德州",
"聊城",
"临沂",
"泰安",
"菏泽"
],
axisPointer: {
type: "shadow"
},
axisTick: {
show: true,
interval: 0
}
}
],
//设置两个y轴，左边显示数量，右边显示概率
yAxis: [
{
type: "value",
name: '数量',
show: true,
// interval: 50,
},
{
type: "value",
// name: '概率',
// min: 0,
// max: 100,
// interval: 10,
show: true,
axisLabel: {
// formatter: '{value} %'
}
}
],
//每个设备分数量、概率2个指标，只要让他们的name一致，即可通过，legeng进行统一的切换
series: [
{
name: "今日",
type: "bar",
data: [
900,
800,
700,
680,
650,
640,
600,
570,
680,
650,
640,
600,
570,
450,
400
],
barWidth: "30%",
itemStyle: {
normal: {
color: "#5B9CEC"
}
}
},
{
name: "昨天",
smooth: true,
symbolSize: 12, // 拐点圆的大小
animation: true, //false: hover圆点不缩放 .true:hover圆点默认缩放
width: 7,
symbol: "circle", //折线点设置为实心点
lineStyle: {
color: "#FFA800", //设置拐点颜色
width: 2 //设置各个拐点连接的线条宽度
},
type: "line",
yAxisIndex: 1, //这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
data: [75, 65, 85, 66, 45, 55, 56, 42, 78, 69, 70, 36, 42, 50, 65],
// symbolSize:10,
itemStyle: {
normal: {
color: "#FFA800",
width:10,
borderColor: "#ffc67a", // 拐点边框颜色
borderWidth: 5 //拐点边框大小
}
}
}
]
};
myChart.setOption(option);
}
5.折线图配合颜色渐变
//客流趋势
peopleNum() {
// 基于准备好的dom，初始化echarts实例
var Echart = echarts.init(document.getElementById("passTrend"));
// 指定相关的配置项和数据
var Option = {
title: {
text: "客流趋势", //主标题文本
top: "2%",
left: "20", //左对齐
// subtext: '模拟数据',
textStyle: {
fontSize: 16 //标题字体的大小
}
},
legend: {
data: ["昨天"],
// 图例的类型
// icon: 'rect',
top: 22,
right: 24,
itemGap: 15,
itemWidth: 20,
itemHeight: 10,
textStyle: {
// padding: [0, 0, 0, 5],
color: "rgba(0,0,0,0.87)"
}
},
color: ["#289df5"],
grid: {
show: false,
top: "100",
bottom: "60",
right: "60",
left: "100"
},
xAxis: {
type: "category",
//数据是否从零刻度开始
boundaryGap: false,
axisLine: {
show: true
},
//x轴刻度
axisTick: {
length: 0
},
axisLabel: {
interval: 0,
textStyle: {
color: "#00c5d7"
}
},
name: "(月)",
nameTextStyle: {
padding: [24, 0, 0, 0]
// color: '#00c5d7'
},
nameGap: 20,
data: [
'',
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12"
]
},
yAxis: {
type: "value",
axisLine: {
show: true
},
axisTick: {
length: 0 // 刻度线的长度
},
//y刻度线
splitLine: {
show: false,
lineStyle: {
color: ["#051d5f"],
width: 1,
type: "solid"
}
},
// 左侧y轴样式
axisLabel: {
textStyle: {
color: "#a3a4b2"
}
}
},
series: [
{
name: "昨天",
type: "line",
//光滑
smooth: true,
symbol: "circle", // 拐点类型
symbolSize: 15, // 拐点圆的大小
animation: true, //false: hover圆点不缩放 .true:hover圆点默认缩放
itemStyle: {
normal: {
color: "#5BB8F9", // 折线条的颜色
borderColor: "#a9dbff", // 拐点边框颜色
borderWidth: 5, //拐点边框大小
areaStyle: {
type: "default",
//折线下面的渐变色
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#5BB8F9" },
{ offset: 1, color: "#FFFFFF" }
])
}
}
},
data: [100, 221, 154, 260, 430, 310, 110, 120, 210, 124, 60,10]
}
]
};
// 使用制定的配置项和数据显示图表
Echart.setOption(Option);
},
希望