echarts-曲线图

---

一、曲线图

需要提前将Echarts组件引入
具体参考Echarts官网，快速入门
Echarts官网：https://echarts.apache.org/zh/index.html
Echarts一些好看的图：https://www.isqqw.com/

npm install echarts --save

<div id="chartId" style="width:100%; height:400px"></div>

//这里是直接引入，也可以按需引入
import * as echarts from 'echarts';

/**
 * 初始化Echart图
 * @param chartId
 * @param data	数据源
 * @returns option
 */
initPie(legends,xData,data){
	//初始化Echarts图标
    let mychart = echarts.init(document.getElementById(chartId));
    mychart.setOption(this.getLineOption(legends,xData,data), true);
},

/**
 * 获取曲线图option
 * @param labs
 * @param datas	数据源，例: [{ value:"",name:"" },{value:"",name:""} ...]
 * @returns option
 */
getLineOption(legends,xData,data){
	option = {
		//鼠标移动时的提示
		tooltip: {
    		trigger: 'axis',
    		//自定义提示样式（默认用自带样式）
    		//formatter: function (params) {
            //    return (
            //        "时间：" + params[0].name + "   点"
            //        + "<br> 数值：" + (parseFloat(params[0].data) 
            //    );
            //},
 		},
	   	//图标控制
	    legend: {
	        //data的内容要和series中name的名称保持一致
            //data: ["图标1","图标2","图标3"],
            data: legends,
            icon: 'rect',
            itemWidth: 16,
            itemHeight: '4',
            center: '0',
            textStyle: {
                color: "#555"
            },
        },
		//x轴坐标
		xAxis: {
			type: 'category',
			//data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			//x坐标轴
			data:xData,
		},
		//y轴坐标
		yAxis: {
			type: 'value'
		},
		//有几个对象就有几条曲线
		series: [
			{
				name: '图标1',
				//data: [820, 932, 901, 934, 1290, 1330, 1320],
				data: data,
				//控制类型, 曲线：line，柱状图：bar,饼图：pie
				type: 'line',
				//控制曲线或折线，true是曲线，false是折线
				smooth: true
			},
			{
				name: '图标2',
				//data: [820, 932, 901, 934, 1290, 1330, 1320],
				data: data,
				//控制类型, 曲线：line，柱状图：bar,饼图：pie
				type: 'line',
				//控制曲线或折线，true是曲线，false是折线
				smooth: true
			},
			{
				name: '图标3',
				//data: [820, 932, 901, 934, 1290, 1330, 1320],
				data: data,
				//控制类型, 曲线：line，柱状图：bar,饼图：pie
				type: 'line',
				//控制曲线或折线，true是曲线，false是折线
				smooth: true
			},
		]
	};
    return option;
}

总结

感觉好就点个赞吧