123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188 |
- var chartDom = document.querySelectorAll('.aside li');
- var option;
- option = {
- tooltip: {
- trigger: 'item'
- },
- legend: {
- bottom: 20,
- left: 'center',
- // type: 'scroll',
- },
- series: [
- {
- name: '访问来源',
- type: 'pie',
- radius: ['40%', '60%'],
- center: ['50%', '30%'],
- avoidLabelOverlap: false,
- label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: '18',
- fontWeight: 'bold'
- }
- },
- color: [
- '#5470c6',
- '#91cc75',
- '#fac858',
- '#ee6666',
- '#73c0de',
- '#fc8452',
- '#9a60b4',
- '#ea7ccc'
- ],
- labelLine: {
- show: false
- },
- data: [
- { value: 1048, name: '搜索引擎' },
- { value: 735, name: '直接访问' },
- { value: 580, name: '邮件营销' },
- { value: 484, name: '联盟广告' },
- { value: 300, name: '视频广告' }
- ]
- }
- ]
- };
- chartDom.forEach(dom => {
- let myChart = echarts.init(dom);
- option && myChart.setOption(option);
- })
- // 地图
- var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
- var mapDom = document.getElementById('map');
- var mapChart = echarts.init(mapDom);
- var mapOption;
- mapChart.showLoading();
- $.get(ROOT_PATH + '/data/asset/geo/HK.json', function (geoJson) {
- mapChart.hideLoading();
- echarts.registerMap('HK', geoJson);
- mapChart.setOption(mapOption = {
- title: {
- text: '香港18区人口密度 (2011)',
- subtext: '人口密度数据来自Wikipedia',
- sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
- },
- tooltip: {
- trigger: 'item',
- formatter: '{b}<br/>{c} (p / km2)'
- },
- toolbox: {
- show: true,
- orient: 'vertical',
- left: 'right',
- top: 'center',
- feature: {
- dataView: { readOnly: false },
- restore: {},
- saveAsImage: {}
- }
- },
- visualMap: {
- min: 800,
- max: 50000,
- text: ['High', 'Low'],
- realtime: false,
- calculable: true,
- inRange: {
- color: ['lightskyblue', 'yellow', 'orangered']
- }
- },
- series: [
- {
- name: '香港18区人口密度',
- type: 'map',
- mapType: 'HK', // 自定义扩展图表类型
- label: {
- show: true
- },
- data: [
- { name: '中西区', value: 20057.34 },
- { name: '湾仔', value: 15477.48 },
- { name: '东区', value: 31686.1 },
- { name: '南区', value: 6992.6 },
- { name: '油尖旺', value: 44045.49 },
- { name: '深水埗', value: 40689.64 },
- { name: '九龙城', value: 37659.78 },
- { name: '黄大仙', value: 45180.97 },
- { name: '观塘', value: 55204.26 },
- { name: '葵青', value: 21900.9 },
- { name: '荃湾', value: 4918.26 },
- { name: '屯门', value: 5881.84 },
- { name: '元朗', value: 4178.01 },
- { name: '北区', value: 2227.92 },
- { name: '大埔', value: 2180.98 },
- { name: '沙田', value: 9172.94 },
- { name: '西贡', value: 3368 },
- { name: '离岛', value: 806.98 }
- ],
- // 自定义名称映射
- nameMap: {
- 'Central and Western': '中西区',
- 'Eastern': '东区',
- 'Islands': '离岛',
- 'Kowloon City': '九龙城',
- 'Kwai Tsing': '葵青',
- 'Kwun Tong': '观塘',
- 'North': '北区',
- 'Sai Kung': '西贡',
- 'Sha Tin': '沙田',
- 'Sham Shui Po': '深水埗',
- 'Southern': '南区',
- 'Tai Po': '大埔',
- 'Tsuen Wan': '荃湾',
- 'Tuen Mun': '屯门',
- 'Wan Chai': '湾仔',
- 'Wong Tai Sin': '黄大仙',
- 'Yau Tsim Mong': '油尖旺',
- 'Yuen Long': '元朗'
- }
- }
- ]
- });
- });
- mapOption && mapChart.setOption(mapOption);
- // 柱状图
- var zztDom = document.getElementById('zzt');
- var zztChart = echarts.init(zztDom);
- var zztoption;
- zztoption = {
- xAxis: {
- type: 'category',
- axisLabel: { interval: 0, rotate: 30 },
- data: ['智慧教学1', '智慧教学2', '智慧教学3', '智慧教学4', '智慧教学5', '智慧教学6', '智慧教学7', '智慧教学8', '智慧教学9', '智慧教学10', '智慧教学11', '智慧教学12', '智慧教学13', '智慧教学14']
- },
- yAxis: {
- type: 'value'
- },
- series: [{
- data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130],
- type: 'bar',
- color: '#0fb6fe'
- }]
- };
- zztoption && zztChart.setOption(zztoption);
|