聊天网站模板上海seo网络优化
echarts是一个基于javascripts的开源可视化图表库
画图步骤：
1.引入echarts.js文件
<script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>也可将文件下载到本地通过src引入。
2. 准备一个呈现图表的盒子：
<div id="dd" style="width: 600px;height:400px;background-color: rgb(198, 229, 237);"></div>3.基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('dd'));4. 准备配置项：
option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar'}]};5. 将配置项设置给echarts实例对象：
myChart.setOption(option);这样我们就可以获得一个echarts图了
柱形图：
代码如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script></head><body><div id="dd" style="width: 600px;height:400px;background-color: rgb(198, 229, 237);"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById('dd'));option = {xAxis: {type: 'category', //类目轴data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value' //数据轴},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar'}]};myChart.setOption(option);</script>
</body></html>相关配置项：title //标题组件
xAxis //x轴
yAxis //y轴
series //系列列表，通过type绝定图表类型
相关配置可查看echats官网：https://echarts.apache.org/zh/option.html#title
折线图：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script><style>.box{width: 900px;height: 600px;background-color:aqua;}
</style>
</head>
<body><div class="box"></div><script>var myChart = echarts.init(document.querySelector(".box"));var options = {title:{text:'条形图',subtext:'',textstyle:{color:'red',fontSize:12},textAlign:'center',left:'50%'},xAxis:{type:'category',data:['浏览量','点赞数','转发数','收藏数','评论量'],name:'x轴'},yAxis:{type:'value',name:'y轴'},series:[{type:'line',data:[5000,800,200,300,150],},{type: 'line',data:[12000,2500,200,800,400],},]}myChart.setOption(options);</script>
</body>
</html>散点图：
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script></head>
<body><div id="scatter" style="width: 600px; height: 400px;"></div><script>var scatter_chart = echarts.init(document.getElementById("scatter"));var scatter_option = {title:{text:"Echart"},xAxis:{},yAxis:{},series:[{symbolSize:20,data:[[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, 7.24],[4.2, 4.62],[12.0, 10.84],[7.0, 4.82],[5.0, 5.58],],type:'scatter'}]};scatter_chart.setOption(scatter_option);</script>
</body>
</html>
饼图：
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
</head>
<body><div id="app" style="width: 600px;height: 400px;"></div><script>// 3.将type设置为pievar myCharts = echarts.init(document.querySelector('#app'))// 需要设置给饼图的数据var sl = [{name: '2018',value: '30'},{name: '2019',value: '10'},{name: '2020',value: '10'},{name: '2021',value: '10'},{name: '2022',value: '20'},{name: '2023',value: '10'}]var option = {legen:{show:true,align:'left',left:0,},// 注意：饼图不是直角坐标系图表，就不用配置x轴和y轴了series: [{type: 'pie',data: sl,radius:["20%","60%"], // roseType:"area"}]}myCharts.setOption(option)</script>
</body>
</html>
roseType:"area" 可以将饼图设置为玫瑰图。