Echarts在线免费图表

 
            const indicator = [
	{
		name: '小型车',
		// max: 6000,
	},
	{
		name: '中型车',
		// max: 6000,
	},
	{
		name: '大型车',
		// max: 6000,
	},
	{
		name: '货车',
		// max: 6000,
	},
	{
		name: '特种车',
		// max: 6000,
	},
	{
		name: '贵宾车',
		// max: 6000,
	},
];
const dataArr = [
	{
		value: [3600, 3900, 4300, 4700, 3800, 4200],
		name: 'SOC',
		itemStyle: {
         color: '#FA9D47',
         opacity: 0.8,
         borderWidth: 1,
         borderColor: '#FA9D47',
      },
      lineStyle: {
         color: '#FA9D47',
      },
      areaStyle: {
         // 单项区域填充样式
         color: '#FA9D47',
         opacity: 0.5, // 区域透明度
      },
	},
	{
		value: [4300, 4700, 3600, 3900, 3800, 4200],
		name: '电流',
		itemStyle: {
         color: '#0496FF',
         opacity: 0.8,
         borderWidth: 1,
         borderColor: '#0496FF',
      },
      lineStyle: {
         color: '#0496FF',
      },
      areaStyle: {
         // 单项区域填充样式
         color: '#0496FF',
         opacity: 0.5, // 区域透明度
      },
	},
	{
		value: [3200, 3000, 3400, 2000, 3900, 2000],
		name: '电压',
		itemStyle: {
         color: '#00FBFF',
         opacity: 0.8,
         borderWidth: 1,
         borderColor: '#00FBFF',
      },
      lineStyle: {
         color: '#00FBFF',
      },
      areaStyle: {
         // 单项区域填充样式
         color: '#00FBFF',
         opacity: 0.5, // 区域透明度
      },
	},
];

option = {
	backgroundColor: '#0e2147',
	// backgroundColor: {
	//     type: 'linear',
	//     x: 0,
	//     y: 0,
	//     x2: 0,
	//     y2: 1,
	//     colorStops: [{
	//         offset: 0,
	//         color: 'rgba(44, 166, 255, 0)' // 0% 处的颜色
	//     }, {
	//         offset: .5,
	//         color: 'rgba(4, 150, 255, 0.2)' // 100% 处的颜色
	//     }, {
	//         offset: 1,
	//         color: 'rgba(44, 166, 255, 0)' // 100% 处的颜色
	//     }],
	//     globalCoord: false // 缺省为 false
	// },
	color: ['#FA9D47', '#0496FF', '#00FBFF'],
	tooltip: {
		// trigger: 'axis',
		backgroundColor: 'rgba(3, 9, 24,1)',
		textStyle: {
			color: 'rgba(255, 255, 255, 1)',
		},
	},
	// 图例
	legend: {
		orient: 'horizontal',
		icon: 'rectangle', //图例形状
		data: ['SOC', '电流', '电压'],
		top: 0,
		left: 0,
		// bottom:20,
		itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
		itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
		itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
		textStyle: {
			fontSize: 14,
			color: '#fff',
		},
	},
	grid: {
		top: 53,
		left: 5,
		right: 0,
		bottom: 0,
		containLabel: true,
	},
	radar: {
		// shape: 'circle',
		radius: ['0', '65%'],
		center: ['50%', '56%'], // 图表的位置 x,y方向
		axisName: {
			color: '#fff',
			fontSize: 14,
		},
		splitNumber: 1,
		indicator: indicator,
		splitArea: {
			// 坐标轴在 grid 区域中的分隔区域，默认不显示。
			show: true,
			areaStyle: {
				// 分隔区域的样式设置。
				color: ['rgba(255,255,255,0.1)', 'rgba(255,255,255,0.2)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
			},
		},
		axisLine: {
			//指向外圈文本的分隔线样式
			lineStyle: {
				color: '#ffffff',
				opacity: 0.1,
			},
		},
		// 最外层的线
		splitLine: {
			lineStyle: {
				color: '#fff', // 分隔线颜色
				opacity: 0.4,
				width: 3, // 分隔线线宽
				shadowColor: '#0496FF',
				// shadowColor: 'red', // 背景阴影
				shadowBlur: 10,
				shadowOffsetY: 15,
			},
		},
	},
	series: [
		{
			type: 'radar',
			symbolSize: 8,
			// symbol: 'angle',
			data: dataArr
		},
	],
};