如何用echarts实现局域网使用的网页

发布网友发布时间：2022-04-25 12:51

共1个回答

热心网友时间：2022-04-22 20:09

1）引入echarts.js。
<script type="text/javascript" src="./js/echarts.js"></script>11

2）创建一个DOM容器。熟悉html的朋友应该很清楚，一个html就是一个DOM树，各个标签节点都是dom节点。DOM容器就是里面可以存放其他节点标签，比如div。
<div id="main" style="width: 500px;height: 400px;"></div>11

3）echarts.init(dom容器)。dom容器必须是html的节点，如果是使用jQuery获取的则必须指定集合中的一个元素节点，比如(“#main”)则表示jQuery对象。$(“#main”)[0]则表示一个id为main的节点。
var myChart = echarts.init(document.getElementById("main"));11

4）设置参数。
方法一：
var option = {
title:{
text:"第一个图标演示示例"
},
tooltip:{
text:"this is tool tip"
},
legend:{
data:['销量']
},
xAxis:{
data:["寸衫","羊毛衫","裤子","袜子","皮鞋","帽子"]
},
yAxis:{},
series:[{
name:["销量"],
type:"bar",
data:[5,20,36,6,43,67]
}]
};

myChart.setOption(option);1234567891011121314151617181920212212345678910111213141516171819202122

方法二：
myChart.setOption({
title:{
text:"第一个图标演示示例"
},
tooltip:{
text:"this is tool tip"
},
legend:{
data:['销量']
},
xAxis:{
data:["寸衫","羊毛衫","裤子","袜子","皮鞋","帽子"]
},
yAxis:{},
series:[{
name:["销量"],
type:"bar",
data:[5,20,36,6,43,67]
}]
});