2. it
  3. 五分钟上手Echarts-官方文档

五分钟上手Echarts-官方文档

mac2022-06-30  130

官方文档地址：5 分钟上手 ECharts

不同版本区别

完全版：echarts/dist/echarts.js，体积最大，包含所有的图表和组件，所包含内容参见：echarts/echarts.all.js。 常用版：echarts/dist/echarts.common.js，体积适中，包含常见的图表和组件，所包含内容参见：echarts/echarts.common.js。 精简版：echarts/dist/echarts.simple.js，体积较小，仅包含最常用的图表和组件，所包含内容参见：echarts/echarts.simple.js。

常用组件

文档->数语速查手册

组件详细设置

文档->配置项手册

官网示例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>echarts</title> <!-- <script src="/static/js/jquery-1.7.2.min.js" charset="UTF-8"></script> --> <script src="static/js/echarts.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> </html>

示例2：多个图（bar+line叠加）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>echarts</title> <!-- <script src="/static/js/jquery-1.7.2.min.js" charset="UTF-8"></script> --> <script src="static/js/echarts.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { //标题 title: { text: 'ECharts 入门示例' }, tooltip: {}, //图例 legend: { data:['销量','产量'] }, //x轴值 xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, //如果不定义y轴,会根据数据自动生成y轴 yAxis: {}, //传入的数据(可以是多个数组) series: [{ name: '销量', type: 'bar', data: [36, 22, 38, 14, 8, 27] },{ name: '产量', type: 'line', data: [80, 50, 42, 50, 60, 85] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> </html>

示例3：工具栏的显示

效果：见右上角工具栏

在数据视图中，用户可以动态修改数据。可以resotre还原。 tooltip：浮动提示层的除法选项

示例4：标记线和标记点

markline标记线 markpoint标记点

示例5：饼图

示例6：仪表图

可以设置不同区域颜色、动态仪表指针动画效果

其他示例

Echarts高级–多个坐标轴

多个坐标系配合两个图表合并展示设置两个y轴配置多个yaxis属性

代码示例（无法选择区域放大，会报错。。）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>echarts</title> <!-- <script src="/static/js/jquery-1.7.2.min.js" charset="UTF-8"></script> --> <script src="static/js/echarts.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> var a = 123; //测试变量作用域 // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { //标题 title: { text: '温度-降水量示例' }, tooltip: { show: true, trigger: 'axis', axisPointer: { type: 'cross', animation: false, label: { show: true, backgroundColor: '#0D4286' } } }, toolbox: { show: true, feature: { mark: { show: true }, dataZoom: { //yAxisIndex: 'none' yAxisIndex: 0 }, dataView: { show: true, readOnly: false, }, magicType: { show: true, type: ['line', 'bar'] }, restore: { show: true, }, saveAsImage: { show: true, } } }, //图例,可以通过点击选择显示和隐藏某组数据 legend: { data: ['降水量', '平均温度1', '平均温度2'] }, dataZoom: [{ id: 'dataZoomX', show: true, realtime: true, orient: "horizontal", start: 0, end: 50, dataBackground: { lineStyle: { color: '#95BC2F' }, /*areaStyle: { color: '#95BC2F', opacity: 1, }*/ }, // backgroundColor:'#d' textStyle: { color: "#ffffff" }, }, // { // id: 'dataZoomY1', // width: 15, // type: 'slider', // yAxisIndex: [0], // orient: "vertical", // realtime: true, // start: 0, // end: 100 // }, ], //x轴值 xAxis: { type: 'category', axisLabel: { rotate: 45, textStyle: { fontSize: '8' } }, data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] }, //如果不定义y轴,会根据数据自动生成y轴 yAxis: [{ type: 'value', name: '水量', min: 0, max: 120, interval: 50, axisLabel: { formatter: '{value}毫升' } }, { type: 'value', name: '温度', min: 0, max: 27, interval: 5, axisLabel: { formatter: '{value}度' } }], //传入的数据(可以是多个数组) series: [{ name: '降水量', type: 'line', yAxisIndex: 0, data: [80, 89, 85, 84, 76, 76, 75, 80, 92, 95, 105, 106, 107, 108, 109, 120] }, { name: '平均温度1', type: 'line', yAxisIndex: 1, data: [10, 12, 14, 15, 14, 18, 20, 20, 19, 19, 18, 18] }, { name: '平均温度2', type: 'line', yAxisIndex: 1, data: [11, 13, 15, 16, 18, 20, 20, 21, 20, 22, 21, 23] }, ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> </html>
dataZoom组件值域漫游

Echarts 折线图y轴标签值太长/y轴太多时显示不全的解决办法

参考：https://www.jianshu.com/p/fcb3ccc7a27a（评论区）

如果先改div的话canvas的宽度会很宽，页面放不下。后来想着可以先canvas绘图，再改canvas大小，使其适应页面。再后来，发现直接修改containLabel即可。。

或者参考：百度经验-echarts 如何修改canvas的宽高

最新回复(0)