本文共 4457 字，大约阅读时间需要 14 分钟。

echarts基本使用

1. 引入echarts.min.js
2. 获取dom元素
3. 初始化echarts实例：echarts.init(dom);
4. 配置图表样式 var option = {…};
5. dom.setOption(option);

图表的配置项和数据

var option = {
   	backgroundColor: '#2c343c' //设置全局背景	textStyle: {
    color: 'rgba(255, 255, 255, 0.3)' }//设置全局字体样式	title: {
   		text: '图表标题', //支持 \n		//设置位置		left: "center|left|right|像素值|相对于容器高宽的百分比", 		top: "40%",		textStyle: {
   		  color: "#fff",		  fontSize: 10, 		  fontWeight: 200		}	},	//提示框	tooltip: {
   		show:true,		trigger:'item|axis|none',//触发类型	},	//图例	legend: {
   		data: ['销量'],		orient: 'vertical',//图例列表的布局朝向		//图例标记的宽高位置		itemWidth: 10,		itemHeight: 2,		right: 5,		icon: 'circle',//标记类型		textStyle: {
   		  fontSize: 5,		  fontWeight: 800		},	}, 	xAxis: {
   		type: 'category',		data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]，		//坐标值		axisLabel: {
     		  fontSize: 5,		  show: true,		  interval: 0,// 显示x轴所有坐标值		}, 		//去掉轴刻度线		axisTick: {
   		  show: false		},		//取消显示坐标轴		axisLine: {
   		  show: false		}	},	yAxis: {
   		type: 'value',		name: '单位：吨',		//文字水平对齐方式		nameTextStyle: {
   			align: 'right',			color: '#19aaf6'		},		interval: 200,//设置坐标轴分割间隔		splitLine: {
   			show: true,  //显示坐标轴在 grid 区域中的分隔线。横向网格线			lineStyle: {
   			  color: '#666d79'			  // opacity:0.5			}		  },	},	//网格线可以调整大小和位置	grid: {
   	    left: 40,	    top: 60,		lineStyle: '#c8cbcf',//网格线颜色	 },	series: [{
   		name: '销量',//系列名称{a}，用于tooltip的显示，legend的图例筛选		type: 'bar',//图表类型 ： line ,pie		data: [5, 20, 36, 10, 10, -20],		itemStyle: {
   			color: '#da1793'		  },		label: {
     //数据标签-数据值			show: true,			position: 'bottom',			offset: [0, 100],//文字偏移 ：横向，纵向			//设置每个系列的文本			textStyle: {
   			  color: 'blue'			}		},	}]};

饼图：

series:[	{
   		type:'pie',		radius:'55%',		//radius: ['30%', '55%'], //内半径，外半径		minAngle: 30, //最小角度		startAngle: 210, //起始角度		color: ["#00AEFF","#284AC6"],		center: ['46%', '50%'],  //[横坐标,纵坐标]		 selectedOffset:0,//选中扇区的偏移距离		roseType:'angle',//南丁格尔图		data: [ //数组 每个数组元素是对象格式        {
    			value: 235, 			name: '视频广告' ,			selected:true,// 该数据项是否被选中			//设置每个扇区的颜色			itemStyle: {
   				color: '#18b0ff',			}, 		},        {
    value: 274, name: '联盟广告' },       ],	 	  label: {
   		position: 'inner' ,//数据标签写在内部		//字符串模板，模板变量 ：  a:系列名 b：数据名 c:数据值 d:百分比		formatter: '{a|{b}}:{n|{c}}{a|万吨}\n\n', 				/*内边距 padding:[上，下,左，右]		 padding:4表示 [4,4,4,4]		 padding:[3,4] 表示 [3,4,3,4]*/				padding: [0, -80],		fontSize: 6,		rich: {
   //富文本框		  n: {
   			fontSize: 10,			color: '#fff'		  },		  a: {
   			fontSize: 5,			color: '#fff'		  }		}	  },	  labelLine: {
   		  show: false ,//不显示视觉引导线样式		  length: 20, //半径方向的长度 视觉引导线第一段		  length2: 80, //横向的长度 视觉引导线第二段		  borderRadius: 3,		  lineStyle: {
   		    type: 'solid',// dotted,dashed  视觉引导线 线型		    color: '#ccc'		  }	  },	}],

默认选中扇区

myChart.dispatchAction({
     type: "highlight",  seriesIndex: 0,  dataIndex: 0,})myChart.on("mouseover", function (e) {
     if (e.dataIndex != index) {
       chart.dispatchAction({
         type: "downplay",      seriesIndex: 0,      dataIndex: index,    })  }})myChart.on("mouseout", function (e) {
     index = e.dataIndex  chart.dispatchAction({
       type: "highlight",    seriesIndex: 0,    dataIndex: e.dataIndex,  })})

折线图

series:[	{
   		type:'line',		smooth: true,		symbolSize: 1,		showSymbol: false,//不显示圆点		// symbol:'none',//没有圆点		symbol: 'circle', //设置折线上的点类型				symbolSize: 3,//设置线两端的标记大小		lineStyle: {
   			width: 1//设置线条粗细		},		//高亮样式		emphasis: {
   			itemStyle: {
   			  color: '#18b0ff',			  borderColor: '#fff',			}		},	}]

dataset

dataset: {
       // 提供一份数据。    source: [      ['product', '有限天津分公司', '有限上海分公司', '有限深圳分公司', '有限湛江分公司'],      ['1月', 1100, 700, 900, 780],      ['2月', 120, 700, 800, 780],      ['3月', 1100, 700, 1000, 600],	 ],	  // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。	   series: [		 {
    type: 'bar', color: '#64fcab', barMinWidth: 4 },		 {
    type: 'bar', color: '#242e3f', barMinWidth: 4 },		 {
    type: 'bar', color: '#18b0ff', barMinWidth: 4 }, 	   ]

原生元素组件

graphic: {
       elements: [      {
           type: "text",//文字组件        left: "60%",        top: "40%",        z: 10,        style: {
             text: "35%",          textAlign: "center",          fill: "#fff",          fontSize: 8,          fontWeight: 700        }      },      {
           type: 'image',//图形组件        style: {
             image: "img/oil_03.png",          width: 17,          height: 17        },        left: 'center',        top: '95'      },    ]  }

感谢阅读，将持续补充及更新 ~

转载地址：https://blog.csdn.net/Conradine_Lian/article/details/108567446 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！