echars编写代码实现公司地图位置信息,提供路线,以及查看天气状况分析
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>公司地图位置信息</title>
<!-- 引入 ECharts 文件 -->
<script src="http://echarts.baidu.com/build/dist/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'));
option = {
backgroundColor: '#f2f2f2',
tooltip : { //提示框组件。
trigger: 'item' //触发类型,数据触发,用户触发 触发事件 数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。 用户触发是指由交互行为引起的触发,如鼠标hover、click、touchstart、touchmove等。 可选值有null/'item'/'axis'/'none',null表示不启动任何交互。 饼图无法使用axis,所以必须使用item来进行数据项上的显示和隐藏。 注意tooltip不能单独存在,必须要有series或者dataset才能正常工作。 这里optionTiemout决定tooltip显隐功能是否生效,即当不存在hover时间时,tooltip是否会依然消失。 需要注意的是trigger为'axis'时, tooltip显隐功能会失效!!! 本文重中之重就是trigger:'item',这样才能正常工作!!! tooltip一般情况下都会配合formatter一并把信息告诉前端!! 这野formatter也得看情况考虑!! formatter:'{a}<br/>{b}:{c}({d}%)',//a代表series name,b代表series data name ,c代表series data value ,d代表series data value 的percentage % formatter:'{a}:({c})',//a代表series name,c代衪eries data value formatter:'{b}:({d}%)',//b代衪eries data name ,d代��ries data value 的percentage % formatter:'{b}:({c})',// b series data name , c series data value 关于formmater最好是通过测试来看看到底如何!! 波浪~(^o^)~zZ },
toolbox : { //工具栏 feature对应内容包括dataView(数据试图)、saveAsImage(保存为图片)、restore(还原)、dataZoom(区域选择),magicType(分性别),markLineMarkPoint(标波浪~(^o^)~zZ },
legend : { //上方小方块对应文字 orient : 'vertical', //vertical水平 horizontal垂直 x : 'left',//水平方向位置 left center right y : 'bottom',//竖直方向位子 top middle bottom textStyle:{color:"#000000"}}, //文字大小 }, color: ['gold','aqua','lime'], title:{text:"公司地理位子",subtext:"天气",x:"center"}, series:[ {name:"天气",type:"map",mapType:"china",roam:true}, ]}; myChart.setOption (option); </script></body></html
创作工场
免责声明:
以上内容除特别注明外均来源于网友提问,创作工场回答,未经许可,严谨转载。
点击这里>>使用🔥专业版,更聪明、更完整、更原创!