最近工作上用到的几种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]