Echarts关于饼图的运用
环形进度图如图就是一个环形的进度条这里的颜色我用了一个渐变的色调。
this.circleOption = {title: {text: "", // 这里的text值指的是我们的环形图主标题就是我们这里的‘交付率’left: "center",top: "32%",textStyle: {color: "#304D5D",fontSize: 1.4 * this.basicDataService.deviceRatio.ratio}, subtext: "", // 这里的subtext指的是我们的副标题，这里就是我们的‘100%’的数值subtextStyle: {color: "#6adeb8",fontSize: 2.6 * this.basicDataService.deviceRatio.ratio // 这里的字体我用了一个基础的比例值来进行赋值}},series: {name: '',type: 'pie',radius: ['90%', '95%'], // 这里的半径是来规定我们环形图的大小的，半径越大环形图越大。而这两个值分别决定我们内圆半径和外圆半径的avoidLabelOverlap: false, // 这个值是用来进行我们环形图tooltip显示可能会覆盖一些数值显示，因为这里没有设置tooltip所以不需要管label: {normal: {show: false},emphasis: {show: false}},labelLine: {normal: {show: false}},data: []}}// 这里的函数我是用来给eCharts配置进行动态赋值// 这里的赋值我主要是用来赋值数据和名称renderCharts(data: number, name: string) {this.circleOption.title.text = namethis.circleOption.title.subtext = data + '%'this.circleOption.title.subtextStyle.color = '#6adeb8'let process = data > 100 ? 100: (data < 0 ? 0 : data) // 注意我们的环形图正常来说比列达到100%就是已经满值了，所以超过100的我们就按100来进行显示，同理低于0的我们就按0来进行显示（注意，这里的data一定是要数据类型）this.circleOption.series.data = [{value: process, // 这里的value指的就是我们的数值name: '',itemStyle: {color: {x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: '#66d4d6' // 0% 处的颜色}, {offset: 0.4, color: '#66d4d6' // 50% 处的颜色}, {offset: 1, color: '#4fa3ee' // 100% 处的颜色}],globalCoord: false // 缺省为 false}, // 这里我是采用了一个渐变的颜色在不同位置来规定它的颜色shadowBlur: 3, // 这里是设置阴影shadowColor: '#4fa3ee',}},{value: 100 - process, // 这里的值就是我们未到达100的数据itemStyle: {color: '#fff',shadowBlur: 8,shadowColor: '#66d4d6',}// 我们可以给未达到100的环形图距离设置颜色这里我就设置为白色了}]this.eCharts.init(this.cycle_charts_one.nativeElement).setOption(this.circleOption) // 这里是采用Angular进行的一种eCharts的渲染}
2.环形组成比例图
如图就是一个我们环形组件的比例图，可以很好显示各个数据的占比
this.circleOption = {color: [], // 这里的颜色我是用动态赋值的，我们也可以已开始定义好tooltip: {trigger: 'item', // 饼图的提示一般是设置为item，柱状图，折线图设置为axisformatter: `{b}({d}${this.unit})`, // b是我们的数值name，d是我们的比列值，unit是我传入的单位confine: true},title: {text: "", // 我们的主标题left: "center",top: "32%",textStyle: {color: "#304D5D",fontSize: 1.4 * this.basicDataService.deviceRatio.ratio},subtext: '', // 副标题subtextStyle: {color: "#101010",fontSize: 2.1 * this.basicDataService.deviceRatio.ratio,fontWeight: "bolder",rich: {a: {fontSize: 1.6 * this.basicDataService.deviceRatio.ratio}} // 这里我们可以自定义一些其他内容的单独的样式,这里我就是对于单位进行单独的样式设置},itemGap: 5,},series: [{name: '',type: 'pie',silent: false,radius: ['80%', '90%'],avoidLabelOverlap: false,labelLine: {normal: {show: false}},label: {normal: {show: false},emphasis: {show: false}},data: []}]}// 这里是动态添加数据并渲染renderCharts() {if(this.subtextUnit) {this.circleOption.title.subtext = this.currentSubtext + `{a|${this.subtextUnit}}` // 注意这里我们因为一开始是以定义a来设置样式的,所以这里的内容也需要加上‘a|’来进行单独内容的样式设置}else {this.circleOption.title.subtext = this.currentSubtext}this.circleOption.title.text = this.currentTextthis.circleOption.series[0].data = this.chartsData// 这里需要注意数据的格式// 这里的数据格式是固定的我们必须传入一个数组// 数组里必须有name，value值// 类似于 chartsData = [{name: '人工成本', value: 20}] 这里的value需要是Number类型this.circleOption.color = this.trendColorthis.eCharts.init(this.circle_com.nativeElement).setOption(this.circleOption)}
3.环形区块图
如图我们也可以设置区块环形图来进行数据比例的显示
this.circleOption = {color: [],tooltip: {trigger: 'item',formatter: '{b} ({d}%)',confine: true},series: {name: '',type: 'pie',radius: '80%',center: ['50%', '50%'],labelLine: {show: false},label: {show: false},data: []// 注意这里的data形式为 [{name: '', value: 20}]}}
4.环形比例显示
如图我们的比例值就显示在图块区域上
this.circleOption = {color: ["#6adeb8", "#9198ce", "#459fef"],series: {name: '',type: 'pie',radius: '80%',center: ['50%', '50%'],label: {show: true,position: 'inside',color: '#fff',formatter: '{d}%'},labelLine: {show: false},silent: true,data: []}}
5.柱状图
这里以两个柱状图为例
this.trendOption = {color: [],tooltip: {axisPointer: {type: 'shadow' // 点击后显示的状态},trigger: 'axis',formatter: null // 这里的设置我会在其他位置来动态设置},legend: {bottom: '0',left: 'center',itemWidth: 16,itemHeight: 8,// icon: 'roundRect',textStyle: {fontSize: 1.2 * this.basicDataService.deviceRatio.ratio},data: []}, grid: {top: '15%',bottom: '10%',left: '3%',right: '3%',containLabel: true // 设置这个可以使我们的坐标轴的数值可以一直显示}, // 用来进行图表的布局，一般设置左右相等为好，值越小离左右边界越近xAxis: {type: 'category',axisTick: {show: false, }, // 坐标轴的交汇位置突出部分是否显示axisLabel: {color: '#101010',fontSize: this.basicDataService.deviceRatio.ratio * 1.2,interval: 0, rotate: 45 // 横坐标数值旋转度}, // 坐标轴数值显示设置axisLine: {lineStyle: {color: '#BBBBBB'}}, // 坐标轴线设置data: []},yAxis: {type: 'value',name: '', // y轴的标题nameLocation: 'end',nameGap: 18, // y轴名称距离轴线的距离nameTextStyle: {color: '#304D5D',fontSize: this.basicDataService.deviceRatio.ratio * 1.2},axisTick: {show: false},axisLine: {lineStyle: {color: '#BBBBBB'}},splitLine: {show: false}, // 网格线axisLabel: {color: '#101010',fontSize: this.basicDataService.deviceRatio.ratio * 1.2,formatter: null},},series: [{name: '',type: 'bar', // 图形类型zIndex: -1,barWidth: 10, // 柱状图宽度barGap: 0, // 柱状图间距itemStyle: {barBorderRadius: [] // 柱状图半径},data: []}, {name: '',type: 'bar',zIndex: -1,barWidth: 10,barGap: 0,itemStyle: {barBorderRadius: []},data: []}]}renderCharts() {this.trendOption.xAxis.data = this.trendAxis // 赋值横坐标if(this.trendAxis.length < 8) {this.trendOption.xAxis.axisLabel.rotate = 0} // 若横坐标数量少于8，横坐标数据正常显示this.trendOption.yAxis.name = this.trendUnit // y轴坐标名称if(this.trendAxis.length <= 4) {this.trendOption.series.forEach(item => {item.barWidth = 18})} // 如果横坐标数值小于5，柱状图宽度设为18this.trendOption.color = this.colorthis.trendOption.tooltip.formatter = params => {let title = params[0].name // 标题内容（当前选中横坐标）let str = ''params.forEach((item, index) => {let marker = `<span style="display: inline-block; height: 1rem; width: 1rem; border-radius: 50%; margin-right: 0.5rem; background-color: ${item.color}"></span>`str += marker + item.seriesName + ': ' + item.data + this.trendUnit + '<br/>'})return title + '<br/>' + str}// 自定义tooltip显示，加入颜色item，并加入数值的单位显示，通过遍历数据this.trendLegend.forEach((item, index) => {if(this.unitOption) {this.trendOption.legend.data.push(item.legendName)this.trendOption.series[index].name = item.legendName} // 设置legendthis.trendOption.series[index].data = this.trendData[item.legendKey] // 设置图表数据数组形式})if(this.trendAxis.length > 10) {this.trendOption.series.forEach(item => {item.barWidth = 8})} // 如果横坐标数值大于10，柱状图宽度设为8if(this.unit) {if(this.unit === '%') {this.trendOption.yAxis.axisLabel.formatter = `{value}${this.unit}`// 自定义y轴坐标数据，如果是百分比按百分率显示}else {this.trendOption.yAxis.name = this.unitthis.trendOption.grid.top = '16%'}} if(this.barRadius.length) {this.trendOption.series.forEach(item => {item.itemStyle.barBorderRadius = this.barRadius})} // 设置柱状图半径this.eCharts.init(this.bar_charts.nativeElement).setOption(this.trendOption)}
6.折线图
如图是以三条折线为例
this.trendOption = {color: [],tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},formatter: null},title: {text: "",left: "center",top: "1%",textStyle: {color: "#101010",fontSize: this.basicDataService.deviceRatio.ratio * 1.2}},legend: {bottom: '0',left: 'center',itemWidth: 12,itemHeight: 10,icon: 'circle',textStyle: {fontSize: 1.2 * this.basicDataService.deviceRatio.ratio},data: []},grid: {top: '11%',bottom: '11%',left: '3%',right: '3%',containLabel: true},xAxis: {type: 'category',axisLabel: {color: '#101010',fontSize: this.basicDataService.deviceRatio.ratio * 1.2,interval: 0,rotate: 45},axisLine: {lineStyle: {color: '#BBBBBB'}},axisTick: {show: false},data: []},yAxis: {type: 'value',name:'',nameLocation: 'end',nameGap: 18,nameTextStyle: {color: '#304D5D',fontSize: 1.2 * this.basicDataService.deviceRatio.ratio},axisTick: {show: false},splitLine: {show: false},axisLabel: {color: '#101010',fontSize: this.basicDataService.deviceRatio.ratio * 1.2,formatter: null},axisLine: {lineStyle: {color: '#BBBBBB'}}},series: [{name: '',type: 'line',zIndex: -1,smooth: true, // 设置曲线是否为平滑showSymbol: false, // 设置是否是在每条数据设置数据点data: []},{name: '',type: 'line',zIndex: -1,smooth: true,showSymbol: false,data: []},{name: '',type: 'line',zIndex: -1,smooth: true,showSymbol: false,data: []}]}renderCharts() {if(this.unit) {if(this.unit === '%') {this.trendOption.yAxis.axisLabel.formatter = `{value}${this.unit}` // 如果是百分比则设置y轴数据为百分比例}else {this.trendOption.yAxis.name = this.unitthis.trendOption.grid.top = '16%'}this.trendOption.tooltip.formatter = params => {let title = params[0].namelet str = ''params.forEach(item => {let markrer = `<span style="display: inline-block; margin-right: 0.5rem; width: 1rem; height: 1rem; background-color: ${item.color}; border-radius: 50%; "></span>`str += markrer + item.seriesName + ': ' + item.data + this.unit + '<br/>'})return title + '<br/>' + str}} // 设置tooltip显示，增加单位if(this.yMin) {this.trendOption.yAxis.min = Number(this.yMin) // 如果必要设置y轴最小值}this.trendOption.xAxis.data = this.trendxAxis this.trendOption.color = this.trendColorthis.trendLegend.forEach((item,index) => {this.trendOption.legend.data.push(item.legendName)this.trendOption.series[index].name = item.legendNamethis.trendOption.series[index].data = this.trendData[item.legendKey]}) // 添加data数据及legend数据if(this.chartName) {this.trendOption.title.text = this.chartName} // 图表名称this.eCharts.init(this.trend_line.nativeElement).setOption(this.trendOption)}
7.折线-柱状图
这里用两个折线图两个柱状图为例
this.trendOption = {color: [],tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},confine: true,formatter: null },legend: [{bottom: '8%',itemWidth: 18,itemHeight: 8,textStyle: {fontSize: 1.2 * this.basicDataService.deviceRatio.ratio},data: []}, {bottom: '0',itemWidth: 18,itemHeight: 8,textStyle: {fontSize: 1.2 * this.basicDataService.deviceRatio.ratio},data: []}], // legend分两行想显示，所以设置两项xAxis: {type: 'category',axisLine: {lineStyle: {color: '#BBBBBB'}},axisLabel: {color: '#101010',fontSize: 1.2 * this.basicDataService.deviceRatio.ratio,interval: 0,rotate: 45},axisTick: {show: false},data: []},grid: {top: '15%',bottom: '15%',left: '3%',right: '3%',containLabel: true},yAxis: [{type: 'value',name:'',nameLocation: 'end',nameGap: 18,nameTextStyle: {color: '#304D5D',fontSize: 1.2 * this.basicDataService.deviceRatio.ratio},axisLabel: {color: '#101010',fontSize: 1.2 * this.basicDataService.deviceRatio.ratio,formatter: null},axisTick: {show: false},splitLine: {show: false},axisLine: {lineStyle: {color: '#BBBBBB'}}}, {type: 'value',name:'',nameLocation: 'end',nameGap: 18,nameTextStyle: {color: '#304D5D',fontSize: 1.2 * this.basicDataService.deviceRatio.ratio},axisLabel: {color: '#101010',fontSize: 1.2 * this.basicDataService.deviceRatio.ratio,formatter: null},axisTick: {show: false},splitLine: {show: false},axisLine: {lineStyle: {color: '#BBBBBB'}}}],series: [{name: '',type: 'bar',zIndex: -1,barWidth: 8,barGap: 0,data: []}, {name: '',type: 'bar',zIndex: -1,barWidth: 8,barGap: 0,data: []}, {name: '',type: 'line',zIndex: -1, // 这里zIndex要设置为-1smooth: true,yAxisIndex: 1,symbol: 'circle', // 折线图数据点显示形状showSymbol:'false',symbolSize: 3, // 点大小lineStyle: {width: 2},data: []},{name: '',type: 'line',zIndex: -1, // 这里zIndex要设置为-1smooth: true,symbol: 'circle',yAxisIndex: 1, // 显示侧边y轴坐标值showSymbol:'false',symbolSize: 3,lineStyle: {width: 2},data: []}]}renderCharts() {this.trendOption.xAxis.data = this.xAxisif(this.unit.length) {this.trendOption.yAxis[0].name = this.unit[0]this.trendOption.yAxis[1].name = this.unit[1]}// 设置y轴名称if(this.yUnit.length) {if(this.yUnit[0] === '%') {this.trendOption.yAxis[0].axisLabel.formatter = `{value}${this.yUnit[0]}`}if(this.yUnit[1] === '%') {this.trendOption.yAxis[1].axisLabel.formatter = `{value}${this.yUnit[1]}`}} //如果是按百分比数据则y轴数据按百分比显示this.trendOption.color = this.colorthis.trendOption.tooltip.formatter = params => {let title = params[0].namelet str = ''params.forEach((item, index) => {let marker = `<span style="display: inline-block; width: 1rem; height: 1rem; border-radius: 50%; background-color: ${item.color}; margin-right: 0.3rem;"></span>`if(item.seriesIndex <= 1) {str = str + marker + item.seriesName + ': ' + item.data + `${this.unit[0]?this.unit[0]: ''}<br/>`} // 设置柱状图tooltip的数据显示else {str = str + marker + item.seriesName + ': ' + item.data + `${this.unit[1]?this.unit[1]: ''}<br/>`} //设置折线图tooltip数据显示})return title + '<br/>' + str }this.trendLegend.forEach((item, index) => {this.trendOption.series[index].name = item.legendNamethis.trendOption.series[index].data = this.trendData[item.legendKey]})this.eCharts.init(this.trend.nativeElement).setOption(this.trendOption)}
