ECharts 2.0 - Basic Bar Chart With Themes

Developer
Janet Wagner
Size
2,826 Kb
Views
66,792
  1. ECharts 2.0 - Basic Bar Chart With Themes Previews
  2. ECharts 2.0 - Basic Bar Chart With Themes HTML Codes
  3. ECharts 2.0 - Basic Bar Chart With Themes CSS Codes
  4. ECharts 2.0 - Basic Bar Chart With Themes JS Codes

How do I make an echarts 2.0 - basic bar chart with themes?

Example of ECharts 2.0 basic bar chart with themes. 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 2.0 - basic bar chart with themes? How do you make a echarts 2.0 - basic bar chart with themes? This script and codes were developed by Janet Wagner on 28 September 2022, Wednesday.

ECharts 2.0 - Basic Bar Chart With Themes Previews
IQ Test

ECharts 2.0 - Basic Bar Chart With Themes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ECharts 2.0 - Basic Bar Chart With Themes</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> <div id="main"></div> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/95368/echarts-all-english-v2.js'></script> <script src="js/index.js"></script>
</body>
</html>

ECharts 2.0 - Basic Bar Chart With Themes - 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;	border: 1px solid #ccc;	padding: 10px;
}

ECharts 2.0 - Basic Bar Chart With Themes - Script Codes JS Codes

 var myChart = echarts.init(document.getElementById('main'), 'sakura');	// Themes: dark, macarons, infographic, green, blue, roma, shine, sakura, macarons2, helianthus, default myChart.setOption({	title : { text: 'The worlds total population', subtext: 'Data from the network' }, tooltip : { trigger: 'axis' }, legend: { data:['2011 Year', '2012 Year'] },
// Changes width of X axis labels	grid: { x: 175
},
// Adds toolbox - top right corner of chart area toolbox: { show : true, // Displays toolbox if set to 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 : 'value', boundaryGap : [0, 0.01] } ], yAxis : [ { type : 'category', data : ['Brazil', 'Indonesia', 'America', 'India', 'China', 'World Population (million)'] } ], series : [ { name:'2011 Year', type:'bar', data:[18203, 23489, 29034, 104970, 131744, 630230] }, { name:'2012 Year', type:'bar', data:[19325, 23438, 31000, 121594, 134141, 681807] } ] });
ECharts 2.0 - Basic Bar Chart With Themes - Script Codes
ECharts 2.0 - Basic Bar Chart With Themes - Script Codes
Home Page Home
Developer Janet Wagner
Username WebCodePro
Uploaded September 28, 2022
Rating 3
Size 2,826 Kb
Views 66,792
Do you need developer help for ECharts 2.0 - Basic Bar Chart With Themes?

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
ECharts Version 3.0 - Funnel Chart
ECharts Version 3.0 - Bar Marker Chart with Infographic Theme
Code Playgrounds Chart
ECharts Version 3.0 - Bar Marker Chart with Shine Theme
ECharts Version 3.0 - Animated Planes Map
ECharts Version 3.0 - Bar Marker Chart
ECharts Version 2.0 - Large Glowing Markpoint Map
ECharts Version 3.0 - Line Marker Chart
ECharts Version 3.0 - Bar Marker Chart with Macarons Theme
ECharts Version 3.0 - Bar Chart with JSON Data
Create amazing love letters 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!