通用属性
title
图表的标题，可设置标题文本、位置、样式等。例如：
{"title": {"text": "示例图表","left": "center","textStyle": {"fontSize": 18,"fontWeight": "bold"}}
}tooltip
鼠标悬停在图表元素上时显示的提示框内容及样式设置。可以配置提示框显示的格式、触发方式等，比如：
{"tooltip": {"trigger": "item","formatter": "{a} <br/>{b}: {c}"}
}legend
图例，用于标识不同系列的数据。可设置图例的位置、排列方式、样式等，如下：
{"legend": {"orient": "vertical","left": "left","data": ["系列1", "系列2"]}
}坐标轴相关属性
xAxis 和 yAxis
分别用于设置 x 轴和 y 轴的属性。常见的设置包括坐标轴类型（如数值轴、类目轴等）、坐标轴名称、刻度设置等。
例如，对于 x 轴设置为类目轴：
{"xAxis": {"type": "category","data": ["苹果", "香蕉", "橙子"],"name": "水果种类","axisTick": {"show": false}}"yAxis": {"type": "value","name": "销量","axisLabel": {"formatter": "{value} kg"}}
}
}
系列（series）属性
type
指定图表的类型，如柱状图（'bar'）、折线图（'line'）、饼图（'pie'）等。不同类型的图表有其特定的配置选项。
例如，绘制柱状图：
{"series": [{"type": "bar","name": "水果销量","data": [10, 20, 15]}]
}data
{"series": [{"type": "pie","name": "水果占比","data": [{"name": "苹果","value": 30},{"name": "香蕉","value": 50},{"name": "橙子","value": 20}]}]
}图表样式属性
color
用于设置图表的颜色主题或单个系列的颜色。可以是一个颜色数组，按照系列顺序依次应用颜色，也可以针对特定系列设置颜色，如下：
{"color": ["#3398DB", "#66CCFF", "#99FF99"],"series": [{"type": "line","name": "系列1","data": [1, 2, 3],"lineStyle": {"color": "#FF0000"}}]
}backgroundColor
设置图表的背景颜色
其他练习实例：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>ECharts</title><!-- 引入刚刚下载的 ECharts 文件 --><script src="echarts.js"></script>
</head>
<style>#main{margin: 20px;width: 30%;height: 40vh;min-height: 100px;min-width: 150px;}#two{margin: 10px; width: 30%;height: 40vh;min-height: 100px;min-width: 150px;}body{background-color: rgb(10, 95, 193);}
</style>
<body><div id="main"></div><script>// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {//对标题进行设置title: {//标题text: '农作物病害发生防止面积',//标题样式textStyle:{//颜色color:'#fff'//字体大小//font-size}//副标题//subtext: 'Fake Data'},//提示框组件tooltip: {trigger: 'axis',axisPointer:{type:"shadow"},backgroundColor:'rgb(0,0,0,0.8)',borderColor:'rgb(0,120,212,0.5)',textStyle:{color:'#fff'}},//图例组件legend: {data: ['发生面积', '防止面积'],//位置right:'3%',//布局朝向orient:'vertical',//纵向//样式textStyle:{//颜色color:'#fff'//字体大小//font-size}},//工具/*toolbox: {show: true,feature: {dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar'] },restore: { show: true },saveAsImage: { show: true }}},*/calculable: true,xAxis: [{type: 'category',// prettier-ignoredata: ['2017', '2018', '2019', '2020', '2021', '2022', '2023'],//坐标轴轴线axisLine:{//坐标轴样式lineStyle:{color:'#fff',}}}],yAxis: [{//坐标轴名称name:'面积（亿亩）',type: 'value',axisLine:{//显示纵轴show:'show',//坐标轴样式lineStyle:{color:'#fff',}},//去掉背景分割横线splitLine:{show:false}}],series: [{name: '发生面积',type: 'bar',//柱状图data: [24,51,59,62,51,45,28],/*markPoint: {data: [{ type: 'max', name: 'Max' },{ type: 'min', name: 'Min' }]},markLine: {data: [{ type: 'average', name: 'Avg' }]}*/},{name: '防止面积',type: 'bar',data:[21,50,55,59,48,41,25],/*markPoint: {data: [{ name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },{ name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }]},markLine: {data: [{ type: 'average', name: 'Avg' }]}*/}],//柱状图颜色//color:['','']//位置grid:{left:'5%',right:'5%',bottom:'2%',//是否包含坐标轴containLabel:true}
};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);//图标调整尺寸window.onresize = function(){myChar.resize()}</script>
<!-- 第二个图表 -->
<div id="two"></div>
<script>var myChart2 = echarts.init(document.getElementById('two'));var option2 = {title: {//标题text: '病虫害致粮食损失统计',//标题样式textStyle:{//颜色color:'#fff'//字体大小//font-size}//副标题//subtext: 'Fake Data'},xAxis: {type: 'category',boundaryGap: true,data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023'],axisLine:{//显示纵轴show:'show',//坐标轴样式lineStyle:{color:'#fff',}},},yAxis: {name:'损失(万吨)',type: 'value',axisLine:{//显示纵轴show:'show',//坐标轴样式lineStyle:{color:'#fff',}},//去掉背景分割横线splitLine:{show:false}},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',color:'#5B89FE',areaStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, // 渐变方向，从左上角到右下角[{ offset: 0, color: 'rgba(0, 0, 0, 0.8)' }, // 起始颜色（红色，透明度为0.5）{ offset: 1, color: 'rgba(128, 128, 128, 0.2)' } // 结束颜色（蓝色，透明度为0.5）])}}]};myChart2.setOption(option2);window.addEventListener('resize', function() {myChart2.resize();});
</script>
</body>
</html>
