echarts 图表建立步骤

需要引用的文件网址:yii666.com<

<script src="web/mobile/js/jquery-1.8.3.min.js"></script>网址:yii666.com

<script src="web/mobile/js/echarts.js"></script>

html页面:文章来源地址https://www.yii666.com/article/756213.html

<div id="main2" style="width: 500px;height: 280px;"></div>

js部分:文章来源地址:https://www.yii666.com/article/756213.html

$(function () {
// 运动/饥饿感/饮食echarts散点图
var myChart = echarts.init(document.getElementById('main2'));
option = {
color:['#A3C902'],
legend: {
data:['饮食']
},
grid: {
height:'200',
width:'450',
containLabel: true,
x: '9%',
x2: '1.5%',
y: '12%',
y2: '5%'
},
xAxis: {
name: '日期',
nameLocation: 'end',
nameTextStyle:{
color:'#1790CF',
align:'right',
baseline:'top'
},
type: 'category',
boundaryGap: false,
data: ['1', '', '3', '', '5', '', '7', '', '9', '', '11', '','13','','15','','17','','19','','21','','23','','25','','27','','29','','31'],
splitLine: {
show: true,
lineStyle:{
color: '#94999b',
width: 1,
type: 'solid'
}
},
axisLine: {
show: true,
lineStyle:{
color:'#94999b',
width: 0.5,
type: 'solid'
}
},
axisLabel: {
show: true,
interval:0
},
axisTick:{
show:true,
lineStyle:{
color:'#ccc'
}

}
},
yAxis: {
type: 'category',
boundaryGap: false,
data: ['6:00','','','','','','00:00','','','','','','18:00','','','','','', '12:00','','','','','','6:00'],
axisLabel: {
show:true,
interval:0
},
splitLine: {
show: true,
lineStyle:{
color: '#94999b',
width: 1,
type: 'solid'
}
},
axisLine: {
show: true,
lineStyle:{
color:'#94999b',
width: 0.5,
type: 'solid'
}
},
axisTick:{
show:true,
lineStyle:{
color:'#94999b'
}文章地址https://www.yii666.com/article/756213.html

}
},
series: [
name:'饮食',
type: 'scatter',
symbol:'rect',
data:[24,9.8, 9.7, 9.6, 9.2,8.9,0],
markPoint : {
symbol:'rect',
symbolSize:4,
itemStyle:{
normal:{
color:'#A3C902'

}

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

版权声明:本文内容来源于网络,版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。文本页已经标记具体来源原文地址,请点击原文查看来源网址,站内文章以及资源内容站长不承诺其正确性,如侵犯了您的权益,请联系站长如有侵权请联系站长,将立刻删除

echarts 图表建立步骤-相关文章

  1. echarts 某省下钻某市地图

  2. 更换 ECharts 散点图图标(散点图中symbol的使用)

  3. echarts 柱状图下钻功能

  4. echarts散点图重叠

  5. echarts 图表建立步骤

  6. 第三方工具 - 关于echarts下钻功能的一些总结.js

    废话:好久没有写博客了,每每看着自己的\\\'战绩\\\'都有点愧疚,但是这段时间确实学习了不少东西,待我慢慢地一 一梳理,将之消化并分享。---------------------------$O_O$---------------------------echarts下钻:就是点击echarts图表,让图表展开更详细的下一级数据。比如:点击2018年的数据

  7. 在echarts里在geojson绘制的地图上展示散点图(气泡)、线集。

    先来要实现的效果图:下方图1是官网的案例:http://www.echartsjs.com/gallery/editor.html?c=scatter-map下图2是展示气泡类型为pin的效果:绘制散点图(气泡)是echarts的一种series:所以要实现在geojson绘制的地图上展示散点图就不能在series里设置geojson的地图在series的type为map里:如果将注册的

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信图片_20190322181744_03.jpg

微信扫一扫打赏

请作者喝杯咖啡吧~

支付宝扫一扫领取红包,优惠每天领

二维码1

zhifubaohongbao.png

二维码2

zhifubaohongbao2.png