ECharts Version 3.0 - Bar Marker Chart
How do I make an echarts version 3.0 - bar marker chart?
Example of ECharts 3.0 bar marker chart. ECharts is a really cool open source charting and visualization library from the team of Baidu EFE - http://efe.baidu.com/. . What is a echarts version 3.0 - bar marker chart? How do you make a echarts version 3.0 - bar marker chart? This script and codes were developed by Janet Wagner on 28 September 2022, Wednesday.
ECharts Version 3.0 - Bar Marker Chart - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ECharts Version 3.0 - Bar Marker Chart</title> <!--[if lt IE 9]><script async src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script><![endif]--> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Must specify width and height of DOM, ref CSS -->
<div id="main"></div> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/95368/echarts.english.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
ECharts Version 3.0 - Bar Marker Chart - Script Codes CSS Codes
body { background-color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #000;
}
a:link, a:visited { color: #4682b4;
}
a:hover { color: #4169e1;
}
#main { width: 1000px; height: 800px;
}
ECharts Version 3.0 - Bar Marker Chart - Script Codes JS Codes
// based ready dom, initialize echarts instance var myChart = echarts.init(document.getElementById('main')); // Specify configurations and data graphs var option = { title : { text: 'Regional Evaporation and Precipitation', subtext: 'Fictitious' }, tooltip : { trigger: 'axis' }, legend: { data:['Evaporation','Precipitation'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', data : ['1 Month','2 Months','3 Months','4 Months','5 Months','6 Months','7 Months','8 Months','9 Months','10 Months','11 Months','12 Months'] } ], yAxis : [ { type : 'value' } ], series : [ { name:'Evaporation', type:'bar', data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], markPoint : { data : [ {type : 'max', name: 'Max'}, {type : 'min', name: 'Min'} ] }, markLine : { data : [ {type : 'average', name: 'Average Value'} ] } }, { name:'Precipitation', type:'bar', data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], markPoint : { data : [ {name : 'Annual Maximum', value : 182.2, xAxis: 7, yAxis: 183}, {name : 'Minimum', value : 2.3, xAxis: 11, yAxis: 3} ] }, markLine : { data : [ {type : 'average', name : 'Average Value'} ] } } ]
}; // Use just the specified configurations and data charts. myChart.setOption(option);
Developer | Janet Wagner |
Username | WebCodePro |
Uploaded | September 28, 2022 |
Rating | 3 |
Size | 2,726 Kb |
Views | 44,528 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Custom checkbox example | Capelo | 3,495 Kb |
Scroll Arrow | Robooneus | 4,437 Kb |
A bit of elegance | Hackthevoid | 9,095 Kb |
Resume | Rottingroom | 5,483 Kb |
Weather App | OmranAbazid | 2,596 Kb |
CardMove | Thompsonemerson | 3,699 Kb |
Animating characters with jQuery | 042 | 2,776 Kb |
Boxes | H3l1um | 2,563 Kb |
Hexagons | Ashmind | 4,360 Kb |
Classy Blockquote Styling | Andrewwright | 3,212 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!