<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 900px;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//上面是通用的
//雷达图
var option ={
title:{
text:'元神角色比拼',//图表标题
textStyle:{
color:'red',//颜色
fontStyle:'oblique',//字体风格
fontWeight:'blod'//字体粗细,变细lighter
},
},
legend:{
data:['胡桃','托马','旅行者']//图例名
},
radar:{
indicator:[//坐标
{name:'气血',max:30000},
{name:'攻击力',max:2500},
{name:'元素精通',max:1000},
{name:'暴击',max:10000}
]
},
series:[{//函数曲线
name:'胡桃vs托马vs旅行者',
type:'radar',
data:[{
value:[30000,2000,1000,10000],//数据
name:'胡桃'
},
{
value:[20000,1500,800,3000],//数据
name:'托马'
},
{
value:[10000,1000,500,1000],//数据
name:'旅行者'
}
]
}
]
};
//散点图
// var option ={
// title:{
// text:'图表名',//图表标题
// textStyle:{
// color:'red',//颜色
// fontStyle:'oblique',//字体风格
// fontWeight:'blod'//字体粗细,变细lighter
// },
// },
// xAxis:{},
// yAxis:{},
// series:[
// {
// SymbolSize:20,//全局参数
// data:[
// [10.0, 8.04],//前面是x轴,后面是y轴
// [8.07, 6.95],
// [13.0, 7.58],
// [9.05, 8.81],
// [11.0, 8.33],
// [14.0, 7.66],
// [13.4, 6.81],
// [10.0, 6.33],
// [14.0, 8.96],
// [12.5, 6.82],
// [9.15, 7.2],
// [11.5, 7.2],
// [3.03, 4.23],
// [12.2, 7.83],
// [2.02, 4.47],
// [1.05, 3.33],
// [4.05, 4.96],
// [6.03, 7.24],
// [12.0, 6.26],
// [12.0, 8.84],
// [7.08, 5.82],
// [5.02, 5.68]
// ],
// type:'scatter'
// }
// ]
// };
//南丁格尔玫瑰图
// var option ={
// title:{
// text:'图表名',//图表标题
// textStyle:{
// color:'red',//颜色
// fontStyle:'oblique',//字体风格
// fontWeight:'blod'//字体粗细,变细lighter
// },
// },
// legend: {
// top: 'bottom'
// },
// toolbox: {//工具
// show: true,
// feature: {
// mark: { show: true },
// dataView: { show: true, readOnly: false },
// restore: { show: true },
// saveAsImage: { show: true }
// }
// },
// series: [
// {
// name: 'Nightingale Chart',
// type: 'pie',
// radius: [50, 200],
// center: ['50%', '50%'],
// roseType: 'area',
// itemStyle: {
// borderRadius: 8
// },
// data: [
// { value: 40, name: 'rose 1' },
// { value: 38, name: 'rose 2' },
// { value: 32, name: 'rose 3' },
// { value: 30, name: 'rose 4' },
// { value: 28, name: 'rose 5' },
// { value: 26, name: 'rose 6' },
// { value: 22, name: 'rose 7' },
// { value: 18, name: 'rose 8' }
// ]
// }
// ]
// };
//饼图
// var option ={
// title:{
// text:'图表名',//图表标题
// textStyle:{
// color:'red',//颜色
// fontStyle:'oblique',//字体风格
// fontWeight:'blod'//字体粗细,变细lighter
// },
// },
// tooltip: {
// trigger: 'item'//触发类型
// },
// legend: {
// orient: 'vertical',//图例列表的布局朝向
// left: 'right'
// },
// series: [
// {
// name: 'Access From',//系列名称
// type: 'pie',
// radius: '50%',//半径
// data: [
// { value: 1048, name: 'Search Engine' },
// { value: 735, name: 'Direct' },
// { value: 580, name: 'Email' },
// { value: 484, name: 'Union Ads' },
// { value: 300, name: 'Video Ads' }
// ],
// emphasis: {
// itemStyle: {
// shadowBlur: 10,//图形阴影的模糊大小
// shadowOffsetX: 0,//阴影水平方向上的偏移距离。
// shadowColor: 'rgba(0, 0, 0, 0.5)'//阴影颜色
// }
// }
// }
// ]
// };
//折柱混合
// var option = {
// tooltip: {
// trigger: 'axis',//触发类型
// axisPointer: {
// type: 'cross',//'line' 直线指示器'shadow' 阴影指示器'none' 无指示器'cross' 十字准星指示器。其实是种简写,表示启用两个正交的轴的 axisPointer
// crossStyle: {
// color: '#999'//线的颜色。
// }
// }
// },
// toolbox: {//工具栏
// feature: {
// dataView: { show: true, readOnly: false },
// magicType: { show: true, type: ['line', 'bar'] },
// restore: { show: true },
// saveAsImage: { show: true }
// }
// },
// legend: {
// data: ['Evaporation', 'Precipitation', 'Temperature']
// },
// xAxis: [
// {
// type: 'category',//'value' 数值轴'category' 类目轴
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
// axisPointer: {
// type: 'shadow'//'line' 直线指示器'shadow' 阴影指示器'none' 无指示器
// }
// }
// ],
// yAxis: [
// {
// type: 'value',
// name: 'Precipitation',
// min: 0,
// max: 250,
// interval: 50,//强制设置坐标轴分割间隔。
// axisLabel: {
// formatter: '{value} ml'
// }
// },
// {
// type: 'value',
// name: 'Temperature',
// min: 0,
// max: 25,
// interval: 5,
// axisLabel: {
// formatter: '{value} °C'//刻度标签的内容格式器,支持字符串模板和回调函数两种形式。
// }
// }
// ],
// series: [
// {
// name: 'Evaporation',//图例名
// type: 'bar',
// tooltip: {
// valueFormatter: function (value) {
// return value + ' ml';
// }
// },
// 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: 'Precipitation',
// type: 'bar',
// tooltip: {
// valueFormatter: function (value) {
// return value + ' ml';
// }
// },
// 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
// ]
// },
// {
// name: 'Temperature',
// type: 'line',
// yAxisIndex: 1,
// tooltip: {
// valueFormatter: function (value) {
// return value + ' °C';
// }
// },
// data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
// }
// ]
// };
//条形图
// var option = {
// title: {
// text: 'World Population'
// },
// tooltip: {
// trigger: 'axis',//触发类型
// axisPointer: {
// type: 'shadow'//指示器类型。
// }
// },
// legend: {},
// grid: {
// left: '3%',
// right: '4%',
// bottom: '3%',
// containLabel: true
// },
// xAxis: {
// type: 'value',
// boundaryGap: [0, 0.01]//坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样
// },
// yAxis: {
// type: 'category',
// data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
// },
// series: [
// {
// name: '2011',
// type: 'bar',
// data: [18203, 23489, 29034, 104970, 131744, 630230]
// },
// {
// name: '2012',
// type: 'bar',
// data: [19325, 23438, 31000, 121594, 134141, 681807]
// }
// ]
// };
//柱状图
// var option = {
// xAxis: {
// type: 'category',
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
// },
// yAxis: {
// type: 'value'
// },
// series: [
// {
// data: [120, 200, 150, 80, 70, 110, 130],
// type: 'bar'
// }
// ]
// };
//嵌套环形图
// var option = {
// tooltip: {
// trigger: 'item',
// formatter: '{a} <br/>{b}: {c} ({d}%)'
// },
// legend: {
// data: [
// 'Direct',
// 'Marketing',
// 'Search Engine',
// 'Email',
// 'Union Ads',
// 'Video Ads',
// 'Baidu',
// 'Google',
// 'Bing',
// 'Others',
// 'qwert'
// ]
// },
// series: [
// {
// name: '齐威王i',
// type: 'pie',
// selectedMode: 'single',
// radius: [0, '30%'],
// label: {
// position: 'inner',
// fontSize: 15
// },
// labelLine: {
// show: false
// },
// data: [
// { value: 1548, name: 'Search Engine' },
// { value: 775, name: 'Direct' },
// {value:852,name:'qwert'},
// { value: 679, name: 'Marketing', selected: true }
// ]
// },
// {
// name: '阿斯顿',
// type: 'pie',
// radius: ['45%', '60%'],
// labelLine: {
// length: 25
// },
// label: {
// formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}:}{c} {per|{d}%} ',
// backgroundColor: '#F6F8FC',
// borderColor: '#8C8D8E',
// borderWidth: 1,
// borderRadius: 4,
// rich: {
// a: {
// color: '#6E7079',
// lineHeight: 20,
// align: 'center'
// },
// hr: {
// borderColor: '#8C8D8E',
// width: '100%',
// borderWidth: 1,
// height: 0
// },
// b: {
// color: '#4C5058',
// fontSize: 14,
// fontWeight: 'bold',
// lineHeight: 33
// },
// per: {
// color: '#fff',
// backgroundColor: '#4C5058',
// padding: [3, 4],
// borderRadius: 4
// }
// }
// },
// data: [
// { value: 1048, name: 'Baidu' },
// { value: 335, name: 'Direct' },
// { value: 310, name: 'Email' },
// { value: 251, name: 'Google' },
// { value: 234, name: 'Union Ads' },
// { value: 147, name: 'Bing' },
// { value: 135, name: 'Video Ads' },
// { value: 102, name: 'Others' }
// ]
// }
// ]
// };
//折线图
// var option = {
// xAxis: {
// type: 'category',
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
// },
// yAxis: {
// type: 'value'
// },
// series: [
// {
// data: [150, 230, 224, 218, 135, 147, 260],
// type: 'line'
// }
// ]
// };
//折线图堆叠
// var option = {
// title: {
// text: 'Stacked Line'
// },
// tooltip: {
// trigger: 'axis'
// },
// legend: {
// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
// },
// grid: {
// left: '3%',
// right: '4%',
// bottom: '3%',
// containLabel: true
// },
// toolbox: {
// feature: {
// saveAsImage: {}
// }
// },
// xAxis: {
// type: 'category',
// boundaryGap: false,
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
// },
// yAxis: {
// type: 'value'
// },
// series: [
// {
// name: 'Email',
// type: 'line',
// stack: 'Total',
// data: [120, 132, 101, 134, 90, 230, 210]
// },
// {
// name: 'Union Ads',
// type: 'line',
// stack: 'Total',
// data: [220, 182, 191, 234, 290, 330, 310]
// },
// {
// name: 'Video Ads',
// type: 'line',
// stack: 'Total',
// data: [150, 232, 201, 154, 190, 330, 410]
// },
// {
// name: 'Direct',
// type: 'line',
// stack: 'Total',
// data: [320, 332, 301, 334, 390, 330, 320]
// },
// {
// name: 'Search Engine',
// type: 'line',
// stack: 'Total',
// data: [820, 932, 901, 934, 1290, 1330, 1320]
// }
// ]
// };
//气泡图
// const data = [
// [
// [28604, 77, 17096869, 'Australia', 1990],//x,y,气泡大小,图例名
// [31163, 77.4, 27662440, 'Canada', 1990],
// [1516, 68, 1154605773, 'China', 1990],
// [13670, 74.7, 10582082, 'Cuba', 1990],
// [28599, 75, 4986705, 'Finland', 1990],
// [29476, 77.1, 56943299, 'France', 1990],
// [31476, 75.4, 78958237, 'Germany', 1990],
// [28666, 78.1, 254830, 'Iceland', 1990],
// [1777, 57.7, 870601776, 'India', 1990],
// [29550, 79.1, 122249285, 'Japan', 1990],
// [2076, 67.9, 20194354, 'North Korea', 1990],
// [12087, 72, 42972254, 'South Korea', 1990],
// [24021, 75.4, 3397534, 'New Zealand', 1990],
// [43296, 76.8, 4240375, 'Norway', 1990],
// [10088, 70.8, 38195258, 'Poland', 1990],
// [19349, 69.6, 147568552, 'Russia', 1990],
// [10670, 67.3, 53994605, 'Turkey', 1990],
// [26424, 75.7, 57110117, 'United Kingdom', 1990],
// [37062, 75.4, 252847810, 'United States', 1990]
// ],
// [
// [44056, 81.8, 23968973, 'Australia', 2015],
// [43294, 81.7, 35939927, 'Canada', 2015],
// [13334, 76.9, 1376048943, 'China', 2015],
// [21291, 78.5, 11389562, 'Cuba', 2015],
// [38923, 80.8, 5503457, 'Finland', 2015],
// [37599, 81.9, 64395345, 'France', 2015],
// [44053, 81.1, 80688545, 'Germany', 2015],
// [42182, 82.8, 329425, 'Iceland', 2015],
// [5903, 66.8, 1311050527, 'India', 2015],
// [36162, 83.5, 126573481, 'Japan', 2015],
// [1390, 71.4, 25155317, 'North Korea', 2015],
// [34644, 80.7, 50293439, 'South Korea', 2015],
// [34186, 80.6, 4528526, 'New Zealand', 2015],
// [64304, 81.6, 5210967, 'Norway', 2015],
// [24787, 77.3, 38611794, 'Poland', 2015],
// [23038, 73.13, 143456918, 'Russia', 2015],
// [19360, 76.5, 78665830, 'Turkey', 2015],
// [38225, 81.4, 64715810, 'United Kingdom', 2015],
// [53354, 79.1, 321773631, 'United States', 2015]
// ]
// ];
// option = {
// backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
// {
// offset: 0,
// color: '#f7f8fa'
// },
// {
// offset: 1,
// color: '#cdd0d5'
// }
// ]),
// title: {
// text: 'Life Expectancy and GDP by Country',
// left: '5%',
// top: '3%'
// },
// legend: {
// right: '10%',
// top: '3%',
// data: ['1990', '2015']
// },
// grid: {
// left: '8%',
// top: '10%'
// },
// xAxis: {
// splitLine: {
// lineStyle: {
// type: 'dashed'
// }
// }
// },
// yAxis: {
// splitLine: {
// lineStyle: {
// type: 'dashed'
// }
// },
// scale: true
// },
// series: [
// {
// name: '1990',
// data: data[0],
// type: 'scatter',
// symbolSize: function (data) {
// return Math.sqrt(data[2]) / 5e2;
// },
// emphasis: {
// focus: 'series',
// label: {
// show: true,
// formatter: function (param) {
// return param.data[3];
// },
// position: 'top'
// }
// },
// itemStyle: {
// shadowBlur: 10,
// shadowColor: 'rgba(120, 36, 50, 0.5)',
// shadowOffsetY: 5,
// color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
// {
// offset: 0,
// color: 'rgb(251, 118, 123)'
// },
// {
// offset: 1,
// color: 'rgb(204, 46, 72)'
// }
// ])
// }
// },
// {
// name: '2015',
// data: data[1],
// type: 'scatter',
// symbolSize: function (data) {
// return Math.sqrt(data[2]) / 5e2;
// },
// emphasis: {
// focus: 'series',
// label: {
// show: true,
// formatter: function (param) {
// return param.data[3];
// },
// position: 'top'
// }
// },
// itemStyle: {
// shadowBlur: 10,
// shadowColor: 'rgba(25, 100, 150, 0.5)',
// shadowOffsetY: 5,
// color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
// {
// offset: 0,
// color: 'rgb(129, 227, 238)'
// },
// {
// offset: 1,
// color: 'rgb(25, 183, 207)'
// }
// ])
// }
// }
// ]
// };
//通用的
myChart.setOption(option);
</script>
</body>
</html>