vue使用ECharts插件

1、安装

1.1、npm安装ECharts

npm install echarts --save

2、全局引入和使用

2.1、引入ECharts

在main.js中引入ECharts。

import echarts from 'echarts';
// 把 echarts 挂载到Vue实例的原型上
// 并且重命名为 $echarts
Vue.prototype.$echarts = echarts;

2.2、使用ECharts

<div id="myChart" :style="{ width: '500px', height: '500px' }"></div>

<script>
let echarts = require('echarts');
export default{
  data(){
    return{

    }
  },
  mounted() {
		this.$nextTick(() => {
			this.initChart();
		});
	},
  methods: {
    	initChart() {
			let chart = echarts.init(document.getElementById("myChart"));
			chart.setOption({
				title: {
					text: "PM 2.5 均值浓度变化情况",
					textStyle: {
						color: "#000",
					},
					x: "center",
					top: "5%",
				},
				backgroundColor: "#fff",
				tooltip: {
					trigger: "axis",
					formatter: "value：{c}<br/>时间：{b}",
				},
				// 保存图片
				toolbox: {
					top: "5%",
					right: "5%",
					iconStyle: {
						borderColor: "#1890ff",
					},
					feature: {
						saveAsImage: {
							type: "png",
							name: "PM2.5均值浓度变化情况",
						},
					},
				},
				xAxis: {
					type: "category",
					data: ["2021-09-01 10:00", "2021-09-01 11:00", "2021-09-01 12:00"],
				},
				yAxis: {
					type: "value",
					boundaryGap: false,
					name: "ug/m³",
					splitLine: {
						show: false,
					},
					// y轴不能设置值
					// data: [0, 30, 60, 90],
				},
				series: [
					{
						data: [6, 30, 60],
						type: "line",
					},
				],
			});
		},
	}

}
</script>

 3.ECharts使用文档相关链接

https://echarts.apache.org/examples/zh/index.html