Using ECharts

Developer
Jek Bao Choo
Size
2,888 Kb
Views
12,144
  1. Using ECharts Previews
  2. Using ECharts HTML Codes
  3. Using ECharts JS Codes

How do I make an using echarts?

This uses Baidu's ECharts. For API, refer to http://ecomfe.github.io/echarts/doc/doc.html. For a variety of JS Graph libraries refer to http://jsgraphs.com. What is a using echarts? How do you make a using echarts? This script and codes were developed by Jek Bao Choo on 12 January 2023, Thursday.

Using ECharts Previews
IQ Test

Using ECharts - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Using ECharts</title>
</head>
<body> <html lang="en">
<head> <meta charset="utf-8"> <title>Using ECharts</title>
</head>
<body> <!-- 为ECharts准备一个具备大小的Dom--> <div id="pieChart" style="height:500px;border:1px solid #ccc;padding:10px;"></div> <div id="barChart" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
</body> <!--引入echarts. Using echarts-all.js for convenience --> <!-- CDN is taken from https://cdnjs.com/libraries/echarts --> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/2.2.7/echarts-all.js"></script>
</html> <script src="js/index.js"></script>
</body>
</html>

Using ECharts - Script Codes JS Codes

// echarts和zrender被echarts-plain.js写入为全局接口
var myChart = echarts.init(document.getElementById('pieChart'));
var idx = 1;
pieChartOption = { timeline: { data: [ '2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01', { name: '2013-06-01', symbol: 'emptyStar6', symbolSize: 8 }, '2013-07-01', '2013-08-01', '2013-09-01', '2013-10-01', '2013-11-01', { name: '2013-12-01', symbol: 'star6', symbolSize: 8 } ], label: { formatter: function(s) { return s.slice(0, 7); } } }, options: [{ title: { text: 'Enrolment Applications this year - all courses', subtext: '今年总入学生 - 所有课程' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { data: ['Accepted', 'Processing', 'Rejected', 'Withdrawn', 'Transit'] }, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['pie', 'funnel'], option: { funnel: { x: '25%', width: '50%', funnelAlign: 'left', max: 1700 } } }, restore: { show: true }, saveAsImage: { show: true } } }, series: [{ name: '状态（数据纯属虚构）', type: 'pie', center: ['50%', '45%'], radius: '50%', data: [{ value: idx * 128 + 80, name: 'Accepted' }, { value: idx * 64 + 160, name: 'Processing' }, { value: idx * 32 + 320, name: 'Rejected' }, { value: idx * 16 + 640, name: 'Withdrawn' }, { value: idx++ * 8 + 1280, name: 'Transit' }] }] }, { series: [{ name: '状态（数据纯属虚构）', type: 'pie', data: [{ value: idx * 128 + 80, name: 'Accepted' }, { value: idx * 64 + 160, name: 'Processing' }, { value: idx * 32 + 320, name: 'Rejected' }, { value: idx * 16 + 640, name: 'Withdrawn' }, { value: idx++ * 8 + 1280, name: 'Transit' }] }] }, { series: [{ name: '状态（数据纯属虚构）', type: 'pie', data: [{ value: idx * 128 + 80, name: 'Accepted' }, { value: idx * 64 + 160, name: 'Processing' }, { value: idx * 32 + 320, name: 'Rejected' }, { value: idx * 16 + 640, name: 'Withdrawn' }, { value: idx++ * 8 + 1280, name: 'Transit' }] }] }, { series: [{ name: '状态（数据纯属虚构）', type: 'pie', data: [{ value: idx * 128 + 80, name: 'Accepted' }, { value: idx * 64 + 160, name: 'Processing' }, { value: idx * 32 + 320, name: 'Rejected' }, { value: idx * 16 + 640, name: 'Withdrawn' }, { value: idx++ * 8 + 1280, name: 'Transit' }] }] }, { series: [{ name: '状态（数据纯属虚构）', type: 'pie', data: [{ value: idx * 128 + 80, name: 'Accepted' }, { value: idx * 64 + 160, name: 'Processing' }, { value: idx * 32 + 320, name: 'Rejected' }, { value: idx * 16 + 640, name: 'Withdrawn' }, { value: idx++ * 8 + 1280, name: 'Transit' }] }] }, { series: [{ name: '状态（数据纯属虚构）', type: 'pie', data: [{ value: idx * 128 + 80, name: 'Accepted' }, { value: idx * 64 + 160, name: 'Processing' }, { value: idx * 32 + 320, name: 'Rejected' }, { value: idx * 16 + 640, name: 'Withdrawn' }, { value: idx++ * 8 + 1280, name: 'Transit' }] }] }, { series: [{ name: '状态（数据纯属虚构）', type: 'pie', data: [{ value: idx * 128 + 80, name: 'Accepted' }, { value: idx * 64 + 160, name: 'Processing' }, { value: idx * 32 + 320, name: 'Rejected' }, { value: idx * 16 + 640, name: 'Withdrawn' }, { value: idx++ * 8 + 1280, name: 'Transit' }] }] }, { series: [{ name: '状态（数据纯属虚构）', type: 'pie', data: [{ value: idx * 128 + 80, name: 'Accepted' }, { value: idx * 64 + 160, name: 'Processing' }, { value: idx * 32 + 320, name: 'Rejected' }, { value: idx * 16 + 640, name: 'Withdrawn+' }, { value: idx++ * 8 + 1280, name: 'Transit' }] }] }, { series: [{ name: '状态（数据纯属虚构）', type: 'pie', data: [{ value: idx * 128 + 80, name: 'Accepted' }, { value: idx * 64 + 160, name: 'Processing' }, { value: idx * 32 + 320, name: 'Rejected' }, { value: idx * 16 + 640, name: 'Withdrawn' }, { value: idx++ * 8 + 1280, name: 'Transit' }] }] }, { series: [{ name: '状态（数据纯属虚构）', type: 'pie', data: [{ value: idx * 128 + 80, name: 'Accepted' }, { value: idx * 64 + 160, name: 'Processing' }, { value: idx * 32 + 320, name: 'Rejected' }, { value: idx * 16 + 640, name: 'Withdrawn' }, { value: idx++ * 8 + 1280, name: 'Transit' }] }] }, { series: [{ name: '状态（数据纯属虚构）', type: 'pie', data: [{ value: idx * 128 + 80, name: 'Accepted' }, { value: idx * 64 + 160, name: 'Processing' }, { value: idx * 32 + 320, name: 'Rejected' }, { value: idx * 16 + 640, name: 'Withdrawn' }, { value: idx++ * 8 + 1280, name: 'Transit' }] }] }, { series: [{ name: '状态（数据纯属虚构）', type: 'pie', data: [{ value: idx * 128 + 80, name: 'Accepted' }, { value: idx * 64 + 160, name: 'Processing' }, { value: idx * 32 + 320, name: 'Rejected' }, { value: idx * 16 + 640, name: 'Withdrawn' }, { value: idx++ * 8 + 1280, name: 'Transit' }] }] }]
};
myChart.setOption(pieChartOption);
/* Bar Chart */
var myBarChart = echarts.init(document.getElementById('barChart'));
var barChartOption = { title: { text: '某地区蒸发量和降水量', subtext: '纯属虚构' }, tooltip: { trigger: 'axis' }, legend: { data: ['2014', '2015'] }, 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月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }], yAxis: [{ type: 'value' }], series: [{ name: '2014', 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], }, { name: '2015', 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], }]
};
myBarChart.setOption(barChartOption);
Using ECharts - Script Codes
Using ECharts - Script Codes
Home Page Home
Developer Jek Bao Choo
Username jek
Uploaded January 12, 2023
Rating 3
Size 2,888 Kb
Views 12,144
Do you need developer help for Using ECharts?

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!

Jek Bao Choo (jek) Script Codes
Name
Understanding JS Event Loop
Working with JavaScript Arrays and Dictionaries
Using Bootstrap
Using Google Chart
Remembering AngularJS Filter
Bootstrap 4 nav-tabs
Working with JS Functions
Playing with w3schools Modals
Parallax Scrolling Website
Playing with Bootstrap Column Ordering
Create amazing marketing copy 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!