uniDataCenter/components/echarts/self-echarts...

<template>
	<div class="echarts-wrap">
		<mpvue-echarts2 :onInit="onInit" canvasId="demo-canvas" />
	</div>
</template>

<script>
	import mpvueEcharts2 from './echarts.vue';
	import * as echarts from './echarts.min'; /*chart.min.js为在线定制*/

	let chart = null;

	function initChart(canvas, width, height, canvasDpr) {
		chart = echarts.init(canvas, null, {
			width: width,
			height: height,
			canvasDpr: canvasDpr ,// 增加了dpr
			devicePixelRatio: canvasDpr // 加上这一行即可解决模糊问题
		});
		canvas.setChart(chart);
		var xArr = ['a','b','c','d'];
		var yArr = [12,233,434,545]
		var option = {
			tooltip: {
				trigger: 'axis',
				show: true,
				formatter: function(params) {
					var params = params[0]
					var result = "";
					result = params.name + '：' + (params.value ? (params.value) : '-') + '\n'
					return result;
				}
			},
			grid: {
				left: "1%",
				right: "2%",
				bottom: "1%",
				containLabel: true
			},
			legend: {
				show: true,
				textStyle: {
					color: '#000'
				}
			},
			xAxis: [{
				type: "category",
				data: xArr,
				axisLine: {
					lineStyle: {
						color: '#89899C'
					}
				},
				axisTick: {
					show: false
				},
				splitLine: {
					show: false
				},
				axisLabel: {
					color: '#89899C',
					fontSize: 10,
					rotate: 30,
				},
			}],
			yAxis: [{
				type: "value",
				name: "个数",
				axisLine: {
					lineStyle: {
						color: '#89899C'
					}
				},
				max: yArr.length == 0 ? 100000 : 'dataMax',
				min: function(value) {
					return value.min <= 0 ? value.min : 0;
				},
				axisTick: {
					show: false
				},
				splitLine: {
					lineStyle: {
						color: "#89899C",
						type: "dashed"
					}
				},
				nameTextStyle: {
					color: "#89899C",
					fontSize: 14,
					padding: [0, 1, 0, 0]
				},
				axisLabel: {
					color: '#89899C',
					fontSize: 13,
					// formatter: function(params) {
					//     var result = params;
					//     return app.func.NumberHandle(result);
					// }
				}
			}],
			series: [{
				type: "bar",
				name: '作品获赞分布',
				barWidth: (100 / xArr.length) > 10 ? 10 : (100 / xArr.length),
				yAxisIndex: 0,
				barGap: 0,
				data: yArr,
				itemStyle: {
					color: "#2562FF",
					barBorderRadius: [4, 4, 4, 4],
					borderType: "dotted"
				}
			}]
		};
		chart.setOption(option,true);

		return chart; // 返回 chart 后可以自动绑定触摸操作
	}
	export default {
		components: {
			mpvueEcharts2
		},
		data() {
			return {
				onInit: initChart
			}
		}
	}
</script>

<style scoped>
	.echarts-wrap {
		width: 100%;
		height: 400rpx;
	}
</style>