位置: IT常识 - 正文

【Echarts】在html中引入echarts详细步骤教程【源码】(echarts css)

发布时间：2024-01-08

【Echarts】在html中引入echarts详细步骤教程【源码】

推荐整理分享【Echarts】在html中引入echarts详细步骤教程【源码】(echarts css)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:echarts label html,echarts label html,html引入echarts路径,echarts html,echarts label html,html引入echarts路径,html引入echarts路径,echarts添加html元素,内容如对您有帮助，希望把文章链接给更多的朋友！

vue3中引入echatrs详细步骤：https://blog.csdn.net/m0_67986791/article/details/129385861vue3组件中单独引入echarts详细步骤：https://blog.csdn.net/m0_67986791/article/details/129960204

1、进入echarts官网

https://echarts.apache.org/zh/index.html

点击【下载】

2、滑到最下面、点击【在线定制】3、选择要打包的图表后，点击【下载】生成echarts.min.js文件4、将下载后的echarts.min.js放到同级目录里面，引入html<!DOCTYPE html><html><head><meta charset="utf-8" /><title>ECharts</title><script src="./echarts.min.js"></script></head><body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript"></script></body></html>5、到官网找一个案例，我找了一个散点图案例，下面是HTML源码<!DOCTYPE html><html><head><meta charset="utf-8" /><title>ECharts</title><script src="./echarts.min.js"></script></head><body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;const dataAll = [[[10.0, 8.04],[8.0, 6.95],[13.0, 7.58],[9.0, 8.81],[11.0, 8.33],[14.0, 9.96],[6.0, 7.24],[4.0, 4.26],[12.0, 10.84],[7.0, 4.82],[5.0, 5.68]],[[10.0, 9.14],[8.0, 8.14],[13.0, 8.74],[9.0, 8.77],[11.0, 9.26],[14.0, 8.1],[6.0, 6.13],[4.0, 3.1],[12.0, 9.13],[7.0, 7.26],[5.0, 4.74]],[[10.0, 7.46],[8.0, 6.77],[13.0, 12.74],[9.0, 7.11],[11.0, 7.81],[14.0, 8.84],[6.0, 6.08],[4.0, 5.39],[12.0, 8.15],[7.0, 6.42],[5.0, 5.73]],[[8.0, 6.58],[8.0, 5.76],[8.0, 7.71],[8.0, 8.84],[8.0, 8.47],[8.0, 7.04],[8.0, 5.25],[19.0, 12.5],[8.0, 5.56],[8.0, 7.91],[8.0, 6.89]]];const markLineOpt = {animation: false,label: {formatter: 'y = 0.5 * x + 3',align: 'right'},lineStyle: {type: 'solid'},tooltip: {formatter: 'y = 0.5 * x + 3'},data: [[{coord: [0, 3],symbol: 'none'},{coord: [20, 13],symbol: 'none'}]]};option = {title: {text: "Anscombe's quartet",left: 'center',top: 0},grid: [{ left: '7%', top: '7%', width: '38%', height: '38%' },{ right: '7%', top: '7%', width: '38%', height: '38%' },{ left: '7%', bottom: '7%', width: '38%', height: '38%' },{ right: '7%', bottom: '7%', width: '38%', height: '38%' }],tooltip: {formatter: 'Group {a}: ({c})'},xAxis: [{ gridIndex: 0, min: 0, max: 20 },{ gridIndex: 1, min: 0, max: 20 },{ gridIndex: 2, min: 0, max: 20 },{ gridIndex: 3, min: 0, max: 20 }],yAxis: [{ gridIndex: 0, min: 0, max: 15 },{ gridIndex: 1, min: 0, max: 15 },{ gridIndex: 2, min: 0, max: 15 },{ gridIndex: 3, min: 0, max: 15 }],series: [{name: 'I',type: 'scatter',xAxisIndex: 0,yAxisIndex: 0,data: dataAll[0],markLine: markLineOpt},{name: 'II',type: 'scatter',xAxisIndex: 1,yAxisIndex: 1,data: dataAll[1],markLine: markLineOpt},{name: 'III',type: 'scatter',xAxisIndex: 2,yAxisIndex: 2,data: dataAll[2],markLine: markLineOpt},{name: 'IV',type: 'scatter',xAxisIndex: 3,yAxisIndex: 3,data: dataAll[3],markLine: markLineOpt}]};option && myChart.setOption(option);</script></body></html>

生成效果：

6.Echarts-基础配置

以下配置很重要：series xAxis yAxis grid tooltip title legend color

series

系列列表，每个系列通过 type 决定自己的图表类型

【Echarts】在html中引入echarts详细步骤教程【源码】(echarts css)

图标数据，指定什么类型的图标，可以多个图表重叠。

xAxis：直角坐标系 grid 中的 x 轴

boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。