echarts 实现各种图表

地图(china map)

// html
<div ref="fillcontainer">
	<div id="fundPosition"></div>
</div>

//js
<script>
import echarts from 'echarts'; // 引入echarts插件
import '../../../node_modules/echarts/map/js/china.js'; // 引入china map数据
import '../../../node_modules/echarts/theme/roma.js' // 引入主题颜色

export default {
	data () {
		return {
			chart: null
		}
	},
	mounted () {
		this.$nextTick(function() {
			this.$refs.fillcontainer.style.height = (document.body.clientHeight - 160) + 'px';
			this.drawMap('fundPosition') // 传入id
			var that = this;
			var resizeTimer = null;
			// 保证页面在放大或缩小时,也能动态显示数据
			window.onresize = function () {
				if (resizeTimer) clearTimeout(resizeTimer);
				resizeTimer = setTimeout(function () {
					that.$refs.fillcontainer.style.height = (document.body.clientHeight 160) + 'px';
					that.drawMap('fundPosition');
				}, 100)
			}
		})
	},
	methods: {
		randomData () {
			return Math.round(Math.random() * 1000000);
		}
		drawMap(id) {
			if (this.chart && this.chart.dispose) {
				this.chart.dispose(); // 释放图表
			}
			this.chart = echarts.init(document.getElementById(id), "roma") // 第一个参数是ID名,第二个参数是主题色
			this.chart.setOption({ // 配置图表
				title: {
					text: '2021年全国各省份投资情况',
					subtext: '单位/万元',
					left: 'center'
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					left: 'left',
					data: ['总投资额']
				},
				visualMap: {
					min: 0,
					max: 1200000,
					left: 'left',
					top: 'bottom',
					text: ['高', '低'], // 文本 默认为数值
					calculable: true
				},
				toolbox: {
					show: true,
					orient: 'vertical',
					left: 'right',
					top: 'center',
					feature: { // 功能按钮
						dataView: {readOnly: false}, // 数据视图
						restore: {}, // 还原
						saveAsImage: {} // 保存为图片
					}
				},
				series: [
					{
						name: '总投资额',
						type: 'map',
						mapType: 'china',
						roam: false,
						label: {
							normal:{
								show: true
							},
							emphasis: {
								show: true
							},
							data:[
                            {name: '北京',value: this.randomData() },
                            {name: '天津',value: this.randomData() },
                            {name: '上海',value: this.randomData() },
                            {name: '重庆',value: this.randomData() },
                            {name: '河北',value: this.randomData() },
                            {name: '河南',value: this.randomData() },
                            {name: '云南',value: this.randomData() },
                            {name: '辽宁',value: this.randomData() },
                            {name: '黑龙江',value: this.randomData() },
                            {name: '湖南',value: this.randomData() },
                            {name: '安徽',value: this.randomData() },
                            {name: '山东',value: this.randomData() },
                            {name: '*',value: this.randomData() },
                            {name: '江苏',value: this.randomData() },
                            {name: '浙江',value: this.randomData() },
                            {name: '江西',value: this.randomData() },
                            {name: '湖北',value: this.randomData() },
                            {name: '广西',value: this.randomData() },
                            {name: '甘肃',value: this.randomData() },
                            {name: '山西',value: this.randomData() },
                            {name: '内蒙古',value: this.randomData() },
                            {name: '陕西',value: this.randomData() },
                            {name: '吉林',value: this.randomData() },
                            {name: '福建',value: this.randomData() },
                            {name: '贵州',value: this.randomData() },
                            {name: '广东',value: this.randomData() },
                            {name: '青海',value: this.randomData() },
                            {name: '*',value: this.randomData() },
                            {name: '四川',value: this.randomData() },
                            {name: '宁夏',value: this.randomData() },
                            {name: '海南',value: this.randomData() },
                            {name: '*',value: this.randomData() },
                            {name: '香港',value: this.randomData() },
                            {name: '澳门',value: this.randomData() }
                        ]
						}
					}
				]
			})
		}
	}
}
</script>

饼图(pie / bar)

<div ref="fillcontainer">
	<el-row :gutter="10">
		<el-col :span="12" style="height: 100%;">
			<div id="typePosition"></div>
		</el-col>
		<el-col :span="12" style="height: 100%;">
			<div id="typePosition2"></div>
		</el-col>
	</el-row>
</div>

<script>
	import echarts from 'echarts';
	import '../../../node_modules/echarts/theme/vintage.js';
	export default {
		data () {
			return {
				chart: null,
				chart_bar: null,
				data: {
					legendData: ['储蓄', '基金', '股票', '债券', '期货'],
					seriesData: [
						{value: this.randomData(), name: '储蓄'},
						{value: this.randomData(), name: '基金'},
						{value: this.randomData(), name: '股票'},
						{value: this.randomData(), name: '债券'},
						{value: this.randomData(), name: '期货'}
					]
				}
			}
		},
		methods: {
			drawpie(id) {
				if (this.chart && this.chart.dispose) {
					this.chart.dispose();
				}
				this.chart = echarts.init(document.getElementById(id), 'vintage');
				this.chart.setOption({
					angleAxis: {},
					radiusAxis: {
						type: 'category',
						data: ['2011年', '2012年', '2013年', '2014年', '2015年', '2016年', '2017年'],
						z: 10
					},
					polar: {},
					series: [{
						type: 'bar',
						data: [80, 20, 30, 40, 70, 50, 10],
						coordinateSystem: 'ploar',
						name: '储蓄',
						stack: 'a'
					}{
                        type: 'bar',
                        data: [60, 40, 60, 10, 30, 20, 10],
                        coordinateSystem: 'polar',
                        name: '基金',
                        stack: 'a'
                    }, {
                        type: 'bar',
                        data: [10, 80, 30, 40, 50, 20, 50],
                        coordinateSystem: 'polar',
                        name: '股票',
                        stack: 'a'
                    },{
                        type: 'bar',
                        data: [60, 20, 10, 80, 30, 20, 50],
                        coordinateSystem: 'polar',
                        name: '债券',
                        stack: 'a'
                    }, {
                        type: 'bar',
                        data: [90, 20, 10, 40, 10, 20, 50],
                        coordinateSystem: 'polar',
                        name: '期货',
                        stack: 'a'
                    }],
                    legend: {
                    	show: true,
                    	data: ['储蓄', '基金', '股票','债券','期货']
                    }
				})
			},
			drawbar(id){
            if ( this.chart_bar &&  this.chart_bar.dispose) { 
                this.chart_bar.dispose(); 
            } 
            this.chart_bar = echarts.init(document.getElementById(id),'vintage');
            this.chart_bar.setOption({
                 angleAxis: {
                        type: 'category',
                        data: ['2011年', '2012年', '2013年', '2014年', '2015年', '2016年', '2017年'],
                        z: 10
                    },
                    radiusAxis: {},
                    polar: {},
                    series: [{
                        type: 'bar',
                        data: [80, 20, 30, 40, 70, 50, 10],
                        coordinateSystem: 'polar',
                        name: '储蓄',
                        stack: 'a'
                    }, {
                        type: 'bar',
                        data: [60, 40, 60, 10, 30, 20, 10],
                        coordinateSystem: 'polar',
                        name: '基金',
                        stack: 'a'
                    }, {
                        type: 'bar',
                        data: [10, 80, 30, 40, 50, 20, 50],
                        coordinateSystem: 'polar',
                        name: '股票',
                        stack: 'a'
                    },{
                        type: 'bar',
                        data: [60, 20, 10, 80, 30, 20, 50],
                        coordinateSystem: 'polar',
                        name: '债券',
                        stack: 'a'
                    }, {
                        type: 'bar',
                        data: [90, 20, 10, 40, 10, 20, 50],
                        coordinateSystem: 'polar',
                        name: '期货',
                        stack: 'a'
                    }],
                    legend: {
                        show: true,
                        data: ['储蓄', '基金', '股票','债券','期货']
                    }
            })
          }
		},
		mounted () {
			this.$nextTick(function () {
				this.drawpie('typePosition');
				this.drawbar('typePosition2');
				window.onresize = () => {
					this.drawpie('typePosition');
					this.drewbar('typePosition2');
				}
			})
		}
	}
</script>

柱状图

<div class="fillcontainer" ref="fillcontainer">
    <div id="incomePayPosition" class="echartsPosition"></div> 
 </div>

export default {
	data() {
        return {
            chart: null
        };
    },
    mounted() {
        this.setInit();
        // 保证页面在放大或缩小时,也能够动态的显示数据
        window.onresize = () => {
            this.setInit();
        }
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose();
        this.chart = null;
    },
    methods: {
    	setInit(){
            this.$nextTick(() => {
                this.$refs.fillcontainer.style.height = (document.body.clientHeight - 160)+'px'
                this.initChart();
                this.chart = null;
            });
        },
        initChart() {
        	this.chart = echarts.init(document.getElementById('incomePayPosition'));
        	const data = {};
        	(function() {
        		const xAxisData = [];
        		const seriesIncome = [];
        		const seriesPay = [];
        		const seriesaverage = [];
        		for (let i = 1; i < 13; i++) {
        			xAxisData.push(i + '月份');
        		}
        		data['xAxisData'] = xAxisData;
        		for (let i = 1; i < 13; i++) {
									                       seriesIncome.push(Math.round(Math.random()*10000));
									                       seriesPay.push(Math.round(Math.random()*10000));
									                       seriesaverage.push(Math.round(Math.random()*10000));
                    }
               data['seriesIncome'] = seriesIncome;
               data['seriesPay'] = seriesPay;
               data['seriesaverage'] = seriesaverage;
        	})();
        	this.chart.setOption({
        		backgroundColor: '#CCFFCC',
        		title: {
        			text: '收支统计',
        			subtext: '单位/万元',
        			x: '4%',
        			textStyle: {
        				color: '#000000',
        				fontSize: '22'
        			},
        			subtextStyle: {
        				color: '#90979c',
        				fontSize: '12'
        			}
        		},
        		tooltip: {
        			trigger: 'axis',
        			axisPointer: {
        				textStyle: {
        					color: '#fff'
        				}
        			}
        		},
        		grid: {
        			borderWidth: 0,
        			top: 110,
        			bottom: 95,
        			textStyle: {
        				textStyle: {
        					color: '#000000'
        				}
        			}
        		},
        		legend: {
        			x: '15%',
        			top: '10%',
        			textStyle: {
        				color: '#90979c'
        			},
        			data: ['收入', '支出', '平均']
        		},
        		calculable: true,
        		xAxis: [{
                    type: 'category',
                    axisLine: {
                    lineStyle: {
                        color: '#0099CC'
                    }
                    },
                    splitLine: {
                         show: false
                    },
                    axisTick: {
                         show: false
                    },
                    splitArea: {
                         show: false
                    },
                    axisLabel: {
                    interval: 0

                    },
                    data: data.xAxisData
                }],
                yAxis: [{
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                    lineStyle: {
                        color: '#0099CC'
                    }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0
                    },
                    splitArea: {
                        show: false
                    }
                }],
                dataZoom: [{
                    show: true,
                    height: 30,
                    xAxisIndex: [
                        0
                    ],
                    bottom: 30,
                    start: 10,
                    end: 80,
                    handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                    handleSize: '110%',
                    handleStyle: {
                       color: '#336699'
                    },
                    textStyle: {
                       color: '#000' 
                    },
                    borderColor: '#339999'
                }, {
                    type: 'inside',
                    show: true,
                    height: 15,
                    start: 1,
                    end: 35
                }],
                series: [{
                    name: '收入',
                    type: 'bar',
                    stack: '总量',
                    barMaxWidth: 35,
                    barGap: '10%',
                    itemStyle: {
                    normal: {
                        color: '#66CC99',
                        label: {
                            show: true,
                            textStyle: {color: '#fff'},
                            position: 'insideTop',
                            formatter(p) {return p.value > 0 ? p.value : '' }
                        }
                    }
                    },
                    data: data.seriesIncome
                },
                {
                    name: '支出',
                    type: 'bar',
                    stack: '总量',
                    itemStyle: {
                    normal: {
                        color: '#0099CC',
                        barBorderRadius: 0,
                        label: {
                        show: true,
                        position: 'top',
                        formatter(p) {
                            return p.value > 0 ? p.value : '';
                        }
                        }
                    }
                    },
                    data:data.seriesPay
                }, {
                    name: '平均',
                    type: 'line',
                    stack: '总量',
                    symbolSize: 10,
                    symbol: 'circle',
                    itemStyle: {
                    normal: {
                        color: '#FF9966',
                        barBorderRadius: 0,
                        label: {
                            show: true,
                            position: 'top',
                            formatter(p) {
                                return p.value > 0 ? p.value : '';
                            }
                        }
                    }
                    },
                    data:data.seriesaverage
                }
                ]
        	})
        }
    }
}
上一篇:jQuery Ajax 简单的实现跨域请求


下一篇:acdream 1683 村民的怪癖(KMP,经典变形)