Echarts的图表可视化

红山果熟

已于 2022-11-22 14:59:03 修改

阅读量230

点赞数

文章标签： echarts vue.js 前端 javascript

于 2022-10-31 16:33:49 首次发布

本文链接：https://blog.csdn.net/ZZJ287401/article/details/127618364

版权

<!DOCTYPE html>

<html>

<head>

<title>ECharts</title>

</head>

<body>

// 基于准备好的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>