在vue项目 使用echarts图表&&解决渲染图表文字模糊问题

通过 npm 安装 echarts

npm install echarts --save

引入使用

注意：使用svg渲染，解决渲染图表文字模糊问题

<template>
  <div class="dashboard-container">
    <div id="chartBox" style="width: 80%;height:50vh;"></div>
  </div>
</template>

<script>
import echarts from 'echarts' //引入
export default {
 name: 'Dashboard',
 mounted(){
  // this.lineChart = echarts.init(document.getElementById('chartBox'));
  //svg渲染,更清晰
this.lineChart= echarts.init(document.getElementById('chartBox'), null, {renderer: 'svg'});  
         // 指定图表的配置项和数据
  		var option = {
				color: ['rgb(85, 153, 254, 1)', 'rgb(68, 203, 187, 1)'],  //同组柱子的颜色
				legend: {},
				tooltip: {},
				dataset: {
					dimensions: ['product', '甲', '乙'],
					source: [{
							product: '2020-01-12',
							'甲': 43.3,
							'乙': 85.8,
						},
						{
							product: '2020-01-13',
							'甲': 83.1,
							'乙': 73.4,
						},
						{
							product: '2020-01-14',
							'甲': 86.4,
							'乙': 65.2,
						},
						{
							product: '2021-01-15',
							'甲': 72.4,
							'乙': 53.9,
						}
					]
				},
				xAxis: {
					type: 'category'
				},
				yAxis: {},
				series: [{
						type: 'bar',
						barWidth: 50, //柱子的宽度
						barGap: '0%',/*多个并排柱子设置柱子之间的间距*/
					},
					{
						type: 'bar',
						barWidth: 50,
					}
				]
			};
			// 使用刚指定的配置项和数据显示图表。
			this.lineChart.setOption(option);
		},
}
</script>

效果展示：

echarts官网