ECharts Version 3.0 - Bar Marker Chart

Developer
Janet Wagner
Size
2,726 Kb
Views
44,506
  1. ECharts Version 3.0 - Bar Marker Chart Previews
  2. ECharts Version 3.0 - Bar Marker Chart HTML Codes
  3. ECharts Version 3.0 - Bar Marker Chart CSS Codes
  4. ECharts Version 3.0 - Bar Marker Chart JS Codes

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 Previews
IQ Test

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);
ECharts Version 3.0 - Bar Marker Chart - Script Codes
ECharts Version 3.0 - Bar Marker Chart - Script Codes
Home Page Home
Developer Janet Wagner
Username WebCodePro
Uploaded September 28, 2022
Rating 3
Size 2,726 Kb
Views 44,506
Do you need developer help for ECharts Version 3.0 - Bar Marker Chart?

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!

Janet Wagner (WebCodePro) Script Codes
Name
Google Interactive Stacked Column Chart
ECharts Version 3.0 - Bar Marker Chart with Dark Theme
ECharts Version 2.0 - Glowing Markpoint Map
ECharts Version 3.0 - Bar Marker Chart with Infographic Theme
ECharts Version 3.0 - Waterfall Chart
ECharts 2.0 - Basic Bar Chart With Themes
ECharts Version 2.0 - Large Glowing Markpoint Map
ECharts 2.0 - Rainbow Bar Chart
ECharts Version 3.0 - Line Marker Chart
Code Playgrounds Chart
Create amazing SEO content with AI!

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!