2019-11-01(echart户环状图, 柱状图, 南丁格尔罗丝图数据)

1, 环状图

// 饼状图数据 option1: { color: ["#fbb03b", "transparent"], series: [ { name: "综合利用率", type: "pie", radius: ["60%", "95%"], // 半径 center: ["50%", "50%"], // 位置 hoverAnimation: false, label: { normal: { show: false, position: "center", //标签的位置 textStyle: { fontWeight: 700, fontSize: "12", //文字的字体大小 color: "#fff" }, formatter: "{d}%" } }, data: [ { value: 44, name: "利用", itemStyle: { normal: { label: { show: true, fontSize: "12", fontWeight: "bold", formatter: "{d}%" }, //颜色渐变 color: new this.$echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: "#1483F4" }, { offset: 1, color: "#0BDCF7" } ] ) } } }, { value: 48, name: "未利用", itemStyle: { normal: { label: { show: false }, //颜色渐变 color: "transparent" } } } ] } ] }

2,柱状图

// 柱状图数据 option2 : { xAxis: { type: "category", data: ["整板", "余料", "整板余", "余料余"], splitLine: { show: true }, axisLabel: { interval: 0 //代表显示所有x轴标签 }, axisLine: { lineStyle: { color: "#fff" } } }, yAxis: [ { type: "value", min: 0, max: 2000, data: [0, 500, 1000, 1500, 2000], splitLine: { show: true, lineStyle: { color: "rgba(255, 255, 255, 0.1)" } }, axisLine: { lineStyle: { color: "#fff" } } }, { type: "value", splitLine: { show: true, lineStyle: { color: "rgba(255, 255, 255, 0.1)" } }, axisLine: { show: false } } ], grid: { top: "10", left: "15%", right: "5%", bottom: "20" }, series: [ { data: [1566, 300, 223, 400], type: "bar", barWidth: 15, // 柱条的宽度 barCategoryGap: 20, // 柱条之间的距离 itemStyle: { normal: { // 使用vue挂载的echart方法实现柱条颜色渐变 color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#4167F1" }, { offset: 1, color: "#02FBFF" } ]), label: { show: true, //开启显示 position: "top", //在上方显示 textStyle: { // 数值样式 color: "#fff", fontSize: 12 } } } } } ] },

3, 南丁格尔罗丝图

// rose图的数据 option3: { tooltip: { trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { x: "-2%", y: "0%", itemWidth: 15, data: ["整板", "余料板"], textStyle: { color: "#fff" } }, calculable: true, series: [ { name: "库存情况", type: "pie", radius: [8, 35], center: ["55%", "55%"], roseType: "radius", color: ["#02FBFF", "#794BEB"], hoverAnimation: false, label: { normal: { show: true, position: "outside", //标签的位置 textStyle: { fontWeight: 300, fontSize: 12, //文字的字体大小 color: "#fff" }, formatter: "{d}%" }, emphasis: { show: true } }, lableLine: { normal: { show: true }, lineStyle: { color: "#02FBFF" } }, data: [{ value: 5, name: "整板" }, { value: 10, name: "余料板" }] } ] }