最近工作上用到的幾種echarts圖表樣例，在此記錄下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>echarts環形圖</title>
<style type="text/css" media="screen">
</style>
</head>
<body>
<div id="charts-div" style="width: 1000px; height: 600px; float: left; border: 1px solid #ccc;"></div>
</body>
<script src="js/jquery/jquery.js"></script>
<script src="js/echarts4.7/echarts.min.js"></script>
<script>
var myChart3 = echarts.init(document.getElementById('charts-div'));
var option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'horizontal',
// bottom: 10,//距離底部的距離（可以是數值或百分比）
top: '70%',
width: '300',
data: ['直接訪問1', '直接訪問2', '直接訪問345678', '直接訪問4', '直接訪問5',
'直接訪問6', '直接訪問7654321', '直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎', '搜索引擎2', '搜索引擎3', '搜索引擎4']
},
series: [
{
name: '訪問來源',
type: 'pie',
radius: ['40%', '60%'],//內圈大小，外圈大小
center: ['50%', '30%'],//位置：距離左邊，距離上邊
avoidLabelOverlap: false,
color: ['#66b2fb', '#F9D858', '#4CD0DD', '#DF86F0', '#F5A7C1', '#acbD858', '#4Ca1DD', '#47F58C', '#17F55E'
, '#acac858', '#4ac1DD', '#6bb3f0', '#F002C1'],
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
itemStyle: {
normal: {
// 設置扇形的陰影
shadowBlur: 15,
shadowColor: '#cccccc',
shadowOffsetX: -5,
shadowOffsetY: 5
}
},
data: [
{value: 335, name: '直接訪問1'},
{value: 335, name: '直接訪問2'},
{value: 335, name: '直接訪問345678'},
{value: 335, name: '直接訪問4'},
{value: 335, name: '直接訪問5'},
{value: 335, name: '直接訪問6'},
{value: 335, name: '直接訪問7654321'},
{value: 335, name: '直接訪問'},
{value: 310, name: '郵件營銷'},
{value: 234, name: '聯盟廣告'},
{value: 135, name: '視頻廣告'},
{value: 1548, name: '搜索引擎'},
{value: 1548, name: '搜索引擎1'},
{value: 1548, name: '搜索引擎2'},
{value: 1548, name: '搜索引擎3'}
]
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart3.setOption(option);
</script>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>echarts中國地圖</title> <style type="text/css" media="screen"> </style> </head> <body> <div id="charts-div" style="width: 1000px; height: 600px; float: left; border: 1px solid #ccc;"></div> </body> <script src="js/jquery/jquery.js"></script> <script src="js/echarts4.7/echarts.min.js"></script> <script> $.get('json/全國地圖/100000.json', function (jiangxiJson) { echarts.registerMap('china', jiangxiJson); // 註冊地圖 var mapChart = echarts.init(document.getElementById('charts-div')); var option = { geo: { map: 'china' }, backgroundColor: 'rgba(25, 30, 64, 1)', // 圖表背景色 // 表頭信息 show: false不顯示 title: { show: true, text: '中國地圖xxx數據', textStyle: {//主標題文本樣式{"fontSize": 18,"fontWeight": "bolder","color": "#333"} color: '#ffffff' } }, // 圖例信息 tooltip: { show: true, trigger: 'item', formatter: '{b}<br/>{c} (單位)' }, // 右側工具箱信息 show: false不顯示 toolbox: { show: false, orient: 'vertical', left: 'right', top: 'center', feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } }, // visualMap: { // show: false, // min: 800, // max: 50000, // text: ['High', 'Low'], // realtime: false, // calculable: true, // inRange: { // color: ['lightskyblue', 'yellow', 'orangered'] // } // }, series: [ { name: '中國xxx數據', type: 'map', mapType: 'china', // 自定義擴展圖表類型 label: { show: true }, itemStyle: { // 定義樣式 normal: { // 普通狀態下的樣式 areaColor: 'rgba(18, 125, 161, 1)', borderColor: 'rgba(25, 30, 64, 1)', }, emphasis: { // 高亮狀態下的樣式 areaColor: 'rgba(61, 140, 226, 1)' } }, 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: 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: 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} ] } ] } mapChart.setOption(option); }); </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>江西省各市xxx數據</title> <style type="text/css" media="screen"> </style> </head> <body> <div id="charts-div" style="width: 1000px; height: 600px; float: left; border: 1px solid #ccc;"></div> </body> <script src="js/jquery/jquery.js"></script> <script src="js/echarts4.7/echarts.min.js"></script> <script> $.get('json/jiangxi.json', function (jiangxiJson) { echarts.registerMap('jiangxi', jiangxiJson); // 註冊地圖 var mapChart = echarts.init(document.getElementById('charts-div')); var option = { geo: { map: 'jiangxi' }, backgroundColor: 'rgba(25, 30, 64, 1)', // 圖表背景色 // 表頭信息 show: false不顯示 title: { show: true, text: '江西省各市xxx數據', textStyle: {//主標題文本樣式{"fontSize": 18,"fontWeight": "bolder","color": "#333"} color: '#ffffff' } }, // 圖例信息 tooltip: { show: true, trigger: 'item', formatter: '{b}<br/>{c} (單位)' }, // 右側工具箱信息 show: false不顯示 toolbox: { show: false, orient: 'vertical', left: 'right', top: 'center', feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } }, // visualMap: { // show: false, // min: 800, // max: 50000, // text: ['High', 'Low'], // realtime: false, // calculable: true, // inRange: { // color: ['lightskyblue', 'yellow', 'orangered'] // } // }, series: [ { name: '江西xxx數據', type: 'map', mapType: 'jiangxi', // 自定義擴展圖表類型 label: { show: true }, itemStyle: { // 定義樣式 normal: { // 普通狀態下的樣式 areaColor: 'rgba(18, 125, 161, 1)', borderColor: 'red', boxShadow: '10px 10px 5px green' }, emphasis: { // 高亮狀態下的樣式 areaColor: 'rgba(61, 140, 226, 1)' } }, 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} ] } ] } mapChart.setOption(option); }); </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>多柱狀圖和折線圖樣例</title> <style type="text/css" media="screen"> </style> </head> <body> <div id="charts1-div" style="width: 1000px; height: 600px; float: left; border: 1px solid #ccc;"></div> </body> <script src="js/jquery/jquery.js"></script> <script src="js/echarts4.7/echarts.min.js"></script> <script> var myChart1 = echarts.init(document.getElementById('charts1-div')); var option1 = { title: { left: 'left', text: '概率', show:false }, tooltip: { trigger: 'axis', formatter:'{a}:{c}', axisPointer: { type: 'cross', crossStyle: { color: '#999' } } }, // backgroundColor: 'rgba(25, 30, 64, 1)', // 圖表背景色 grid: { show:false, top:'30', bottom:'60', right:'60', left:'60' }, xAxis: [ { type: 'category', data: ['南昌市', '上饒市', '撫州市', '宜春市', '吉安市', '贛州市', '鷹潭市', '新餘市','九江市','萍鄉市','景德鎮市'], axisPointer: { type: 'shadow' }, axisTick: { show:true, interval: 0 }, } ], //設置兩個y軸，左邊顯示數量，右邊顯示概率 yAxis: [ { type: 'value', name: '', show:true, interval: 50, }, { show:false, type: 'value', name: '', min: 0, max: 100, interval: 10, axisLabel: { formatter: '{value} %' } } ], //每個設備分數量、概率2個指標，只要讓他們的name一致，即可通過，legeng進行統一的切換 series: [ { name:'設備一', type:'bar', data:[800,700,600,580,550,540,500,470,580,550,540], barWidth : '30%', }, { name:'設備一', type:'bar', data:[900,800,700,680,650,640,600,570,680,650,640], barWidth : '30%', }, { name:'設備一', type:'line', smooth: true, yAxisIndex: 1, //這裏要設置哪個y軸，默認是最左邊的是0，然後1，2順序來。 data:[75,65,85,66,45,55,56,42,78,69,70], symbolSize:10, itemStyle:{ normal:{ color:"#DDA0DD", label: { show: true, //開啓顯示 position: 'top', //在上方顯示 textStyle: { //數值樣式 color: 'black', fontSize: 16 } } } } }, { name:'設備一', type:'line', smooth: true, yAxisIndex: 1, //這裏要設置哪個y軸，默認是最左邊的是0，然後1，2順序來。 data:[45,55,65,16,40,50,46,32,68,59,60], symbolSize:10, itemStyle:{ normal:{ color:"#DDA0DD", label: { show: true, //開啓顯示 position: 'top', //在上方顯示 textStyle: { //數值樣式 color: 'black', fontSize: 16 } } } } }, ] }; // 使用剛指定的配置項和數據顯示圖表。 myChart1.setOption(option1); </script> </html>
需要源代碼的朋友可發郵件至[email protected]