echarts的常用案例

安装依赖后引入echarts

// mian.js
import echarts from 'echarts'//引入
Vue.prototype.$echarts = echarts// 挂在vue上面

直接引入js

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>

在文件中创建图表指定宽高

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图表</title>
</head>
<body>
<div id="chart1" style="width:600px; height: 800px;"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<!--直接引入js -->
<script type="text/javascript">//指定图标的配置和数据，具体内容在后面配置中var option = {}//初始化echarts实例var myChart = echarts.init(document.getElementById('chart1'));//使用制定的配置项和数据显示图表myChart.setOption(option);
</script></body>
</html>

雷达图

option: {title: {text: '关键财务指标',textStyle: {color: 'rgba(221,221,221,1)', // 标题颜色fontSize: 14,lineHeight: 20}},// 图表的位置grid: {position: 'center'},radar: {// shape: 'circle', // 设置雷达图底线为圆形splitNumber: 3, // 雷达图圈数设置name: {textStyle: {color: 'rgb(51,148,201)'}},// 设置雷达图中间射线的颜色axisLine: {lineStyle: {color: 'rgb(51,148,201)'}},indicator: [{ name: '实际报销率', max: 60 },{ name: '资产负债率', max: 60 },{ name: '固定资产折旧率', max: 60 },{ name: '收支比率', max: 60 },{ name: '销售利润率', max: 60 },{ name: '应付付款率', max: 60 }],// 雷达图背景的颜色, 在这儿随便设置了一个颜色, 完全不透明度为0, 就实现了透明背景splitArea: {show: false,areaStyle: {color: 'rgba(255,0,0,0)' // 图表背景的颜色}},splitLine: {show: true,lineStyle: {width: 1,color: 'rgba(131,141,158,.1)' // 设置网格的颜色}}},series: [{name: '雷达图', // tooltip中的标题type: 'radar', // 表示是雷达图symbol: 'circle', // 拐点的样式, 还可以取值'rect','angle'等symbolSize: 1, // 拐点的大小areaStyle: {normal: {color: [new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(86,191,200)'}, {offset: 1,color: 'rgb(51,148,201)'}])],width: 1,opacity: 0.6}},data: [{value: [40, 51, 45, 48, 48, 54],// 设置区域边框和区域的颜色itemStyle: {normal: {color: [new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(86,191,200)'}, {offset: 1,color: 'rgb(51,148,201)'}])],lineStyle: {color: 'rgba(1,87,134,0.3)'}}},// 在拐点处显示数值label: {normal: {show: true,formatter: (params) => {return params.value}}}}]}]
}

柱状图

option = {bottom: '50%',title: {text: '近13个月销售利润走势',textStyle: {color: 'rgba(221,221,221,1)', // 标题颜色fontSize: 14,lineHeight: 20}},grid: {left: '4%',right: '4%',bottom: '15%',containLabel: true},xAxis: {type: 'category',axisLabel: {textStyle: {color: '#838D9E'},formatter: function (value) {return value.split('').join('\n')}// 竖直显示x轴文字},data: ['新疆', '甘肃省', '贵州省', '江苏省', '浙江省', '福建省', '广东省', '湖北省', '山东省', '河北省', '北京市']},yAxis: [{type: 'value',name: '单位：亿元',nameTextStyle: {color: '#838D9E'},splitLine: { show: false }, // 不显示背景数据分割线axisLabel: {textStyle: {color: '#838D9E'}}}],graphic: [{ // 一个图形元素，类型是 group，可以嵌套子节点。type: 'group',children: [{type: 'text',style: {fill: '#1f79ac',text: '当月销售利润：',font: '1em "STHeiti", sans-serif',x: 100,y: 30}}, {type: 'text',style: {fill: '#fff',text: '1.05',font: '1.2em "STHeiti", sans-serif',x: 200,y: 30}}, {type: 'text',style: {fill: '#1f79ac',text: '亿元',font: '1em "STHeiti", sans-serif',x: 240,y: 30}}, {type: 'text',style: {fill: '#1f79ac',text: '同比变化：',font: '1em "STHeiti", sans-serif',x: 300,y: 30}}, {type: 'text',style: {fill: '#ce9126',text: '34.56%',font: '1.2em "STHeiti", sans-serif',x: 370,y: 30}}, {type: 'image',style: {image: require('./img/right1-2.png'),fill: 'red',width: 30,height: 30,x: 440,y: 22}}]}], // 图层series: [{type: 'bar',barWidth: 20, // 柱宽度data: [200, 150, 100, 250, 150, 100, 100, 200, 150, 200, 160],itemStyle: {normal: { // 柱状图颜色color: '#b051ad'}}}]
}

横向柱状图

option = {title: {text: '产值GDP （单位： 亿元）',textStyle: {color: 'rgba(221,221,221,1)', // 标题颜色fontSize: 14,lineHeight: 20}},grid: {left: '4%',right: '4%',containLabel: true,bottom: '15%'},tooltip: {},xAxis: {axisLabel: {// 坐标轴刻度标签的相关设置textStyle: {color: '#d6e7d9'}},splitLine: {show: false // 是否显示坐标轴刻度背景线}},yAxis: {data: ['长期资产', '波动资产', '无形资产', '固定资产', '其他资产'],axisLabel: {// 坐标轴刻度标签的相关设置textStyle: {color: '#d6e7d9',align: 'right',width: 50,fontSize: 12}}},series: [{type: 'bar',barWidth: 15, // 柱宽度data: [100, 200, 100, 300, 100],itemStyle: {normal: { // 柱状图颜色color: '#0076e2'}}}]
}

折线图

option = {title: {text: '利润 （单位： 亿元）',textStyle: {color: 'rgba(221,221,221,1)', // 标题颜色fontSize: 14,lineHeight: 20}},tooltip: {},legend: {data: ['利润 （单位： 亿元）']},xAxis: {data: ['2016', '2017', '2018', '2019', '2020'],axisLabel: {// 坐标轴刻度标签的相关设置textStyle: {color: '#d6e7d9',width: '100%'}}},yAxis: {splitArea: { show: false },splitLine: { show: false },axisLabel: {// 坐标轴刻度标签的相关设置textStyle: {color: '#d6e7d9',align: 'right',fontSize: 12}}},series: [{type: 'line',barWidth: 10, // 柱宽度data: [100, 300, 350, 300, 400],smooth: true,areaStyle: {normal: {color: {x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#269dc8' // 0% 处的颜色}, {offset: 0.7,color: '#0c1928' // 100% 处的颜色}]}}}, // 填充区域样式itemStyle: {normal: { // 柱状图颜色color: '#269dc8'}}}]
}

多条折线图

option = {title: {text: '航天总趋势分析',textStyle: {color: 'rgba(221,221,221,1)', // 标题颜色fontSize: 14,lineHeight: 20}},legend: {icon: 'roundRect',textStyle: {color: 'rgba(221,221,221,1)' // 示例颜色},top: 40,data: ['总资产', '营业额', '纳税额', '利润']},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: [{axisLabel: {textStyle: {color: '#838D9E'}},type: 'category',boundaryGap: false,splitLine: { show: false },data: [2016, 2017, 2018, 2019, 2020]}],yAxis: [{axisLabel: {textStyle: {color: '#838D9E'}},splitLine: { show: false }// type: 'value'}],series: [{name: '总资产',type: 'line',smooth: true, // 平滑的icon: 'line',itemStyle: {normal: {color: [new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#1f838b'}, {offset: 1,color: 'rgb(51,148,201)'}])],lineStyle: {color: '#1f838b'}}}, // 设置折现颜色stack: '总量',areaStyle: { normal: {} },data: [500, 420, 200, 134, 240, 330, 210]},{name: '营业额',type: 'line',smooth: true, // 平滑的itemStyle: {normal: {color: '#0b79b5',lineStyle: {color: '#0b79b5'}}}, // 设置折现颜色stack: '总量',areaStyle: { normal: {} },data: [220, 182, 191, 234, 290, 330, 310]},{name: '纳税额',type: 'line',smooth: true, // 平滑的itemStyle: {normal: {color: '#4556a4',lineStyle: {color: '#4556a4'}}}, // 设置折现颜色stack: '总量',areaStyle: { normal: {} },data: [150, 232, 101, 300, 190, 330, 410]},{name: '利润',type: 'line',smooth: true, // 平滑的itemStyle: {normal: {color: '#95cdef',lineStyle: {color: '#95cdef'}}}, // 设置折现颜色stack: '总量',areaStyle: { normal: {} },data: [320, 332, 301, 334, 230, 330, 320]}]
}

柱状图和折线图在一个页面

option:
{title: {text: '航天存款趋势分析',textStyle: {color: 'rgba(221,221,221,1)', // 标题颜色fontSize: 14,lineHeight: 20}},grid: {left: '4%',right: '4%',bottom: '15%',containLabel: true},xAxis: {type: 'category',axisLabel: {textStyle: {color: '#838D9E'}},data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']},yAxis: [{type: 'value',name: '单位：亿元',nameTextStyle: {color: '#838D9E'},splitLine: { show: false }, // 不显示背景数据分割线axisLabel: {textStyle: {color: '#838D9E'}}},{splitLine: { show: false },nameTextStyle: { color: '#838D9E' },type: 'value',name: '单位：%',position: 'right',min: 0,max: 100, // 百分比的最大最小值axisLabel: {textStyle: {color: '#4572A7'},show: true,interval: 'auto',formatter: '{value}%'},show: true}],series: [{type: 'line',// smooth: true,// 不是平滑的icon: 'line',itemStyle: {normal: {color: '#49a8e2',lineStyle: {color: '#49a8e2'}}}, // 设置折现颜色data: [50, 100, 90, 180, 140, 80, 80, 180, 130, 170, 140, 150]},{type: 'bar',barWidth: 25, // 柱宽度data: [200, 150, 100, 250, 150, 100, 100, 200, 150, 200, 160, 180],itemStyle: {normal: { // 柱状图颜色color: '#235790'}}}]
}

环形图

option = {// 标题title: {text: '回款情况',textStyle: {color: 'rgba(221,221,221,1)', // 标题颜色fontSize: 14,lineHeight: 20}},grid: {left: '4%',right: '4%',bottom: '15%',containLabel: true},// graphic 是原生图形元素组件。可以支持的图形元素包括：image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,graphic: [{type: 'text', // [ default: image ]用 setOption 首次设定图形元素时必须指定。image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,top: 'center', // 描述怎么根据父元素进行定位。top 和 bottom 只有一个可以生效。如果指定 top 或 bottom, 则 shape 里的 y、cy 等定位属性不再生效。『父元素』是指：如果是顶层元素, 父元素是 echarts 图表容器。如果是 group 的子元素, 父元素就是 group 元素。left: 'center', // 同上style: {fill: '#fff',width: 50,height: 60,text: ['47%', '实收账款占比']}},{ // 一个图形元素，类型是 group，可以嵌套子节点。type: 'group',children: [{type: 'text',style: {fill: '#0c7ab5',text: '应收款率',font: '1em "STHeiti", sans-serif',x: 100,y: 50}}, {type: 'text',style: {fill: '#fff',text: '2.13',font: '1.4em "STHeiti", sans-serif',x: 100,y: 70}}, {type: 'text',style: {fill: '#fff',text: '亿元',font: '1em "STHeiti", sans-serif',x: 140,y: 70}}, {type: 'image',style: {image: require('./img/centerHeader1-1.png'),width: 30,height: 30,x: 50,y: 50}}]}], // 图层// 系列列表series: [{type: 'pie', // 系列类型radius: ['30%', '45%'], // 饼图的半径, 数组的第一项是内半径, 第二项是外半径。[ default: [0, '75%'] ]hoverAnimation: true, // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]color: ['#4456a2', '#3B96CB', '#26609f', '#0b79b4'], // 圆环图的颜色label: { // 饼图图形上的文本标签, 可用于说明图形的一些数据信息, 比如值, 名称等.normal: {show: true, // 是否显示标签[ default: false ]formatter: (par) => {return par.name + '\n' + par.value + '%'} // 标签内容}},labelLine: { // 标签的视觉引导线样式,在 label 位置 设置为'outside'的时候会显示视觉引导线。normal: {length: 0 // 在 label 位置 第一段折现的长度}},data: [{name: '分支机构1',value: 193}, {name: '分支机构2',value: 178}, {name: '控股企业2',value: 140}, {name: '控股企业1',value: 127}] // 系列中的数据内容数组。}]
}

中国地图

import 'echarts/map/js/china'
randomData: function () {return Math.round(Math.random() * 1000)
}option = {geo: {map: 'china',roam: false, // 一定要关闭拖拽zoom: 1.23,center: [105, 36], // 调整地图位置label: {normal: {show: false, // 关闭省份名展示fontSize: '10',color: 'rgba(0,0,0,0.7)'},emphasis: {show: false}},itemStyle: {normal: {areaColor: '#002f67', // 地图颜色borderColor: '#389dff', // 边框颜色borderWidth: 1, // 设置外层边框shadowBlur: 5,shadowOffsetY: 8,shadowOffsetX: 0,shadowColor: '#0172fe'// 阴影颜色},emphasis: {areaColor: '#184cff',shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 5,borderWidth: 0,shadowColor: 'rgba(83,230,59,0.5)'}}},series: [{type: 'map',map: 'china',roam: false,zoom: 1.23,center: [105, 36],// geoIndex: 1,// aspectScale: 0.75, //长宽比showLegendSymbol: false, // 存在legend时显示label: {normal: {show: false},emphasis: {show: false,textStyle: {color: '#fff'}}},itemStyle: {normal: {areaColor: '#002f67',borderColor: '#389dff',borderWidth: 0.5},emphasis: {areaColor: '#013068',shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 5,borderWidth: 0,shadowColor: 'rgba(86,191,200,0.5)'}},data: [{ name: '上海', value: this.randomData() },{ name: '北京', value: '100' },{ name: '天津', value: this.randomData() },{ name: '重庆', value: this.randomData() },{ name: '河北', value: this.randomData() },{ name: '河南', value: this.randomData() },{ name: '云南', value: this.randomData() },{ name: '辽宁', value: this.randomData() },{ name: '黑龙江', value: this.randomData() },{ name: '湖南', value: this.randomData() },{ name: '安徽', value: this.randomData() },{ name: '山东', value: this.randomData() },{ name: '新疆', value: this.randomData() },{ name: '江苏', value: this.randomData() },{ name: '浙江', value: this.randomData() },{ name: '江西', value: this.randomData() },{ name: '湖北', value: this.randomData() },{ name: '广西', value: this.randomData() },{ name: '甘肃', value: this.randomData() },{ name: '山西', value: this.randomData() },{ name: '内蒙古', value: this.randomData() },{ name: '陕西', value: this.randomData() },{ name: '吉林', value: this.randomData() },{ name: '福建', value: this.randomData() },{ name: '贵州', value: this.randomData() },{ name: '广东', value: this.randomData() },{ name: '青海', value: this.randomData() },{ name: '西藏', value: this.randomData() },{ name: '四川', value: this.randomData() },{ name: '宁夏', value: this.randomData() },{ name: '海南', value: this.randomData() },{ name: '台湾', value: this.randomData() },{ name: '香港', value: this.randomData() },{ name: '澳门', value: this.randomData() }]}]
}

极地坐标

option = {title: {text: '市场地位',textStyle: {color: 'rgba(221,221,221,1)', // 标题颜色fontSize: 14,lineHeight: 20}},angleAxis: {show: true,splitLine: {show: true}},color: [new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgb(86,191,200)'}, {offset: 1,color: 'rgb(51,148,201)'}])],radiusAxis: {axisLine: { show: true },axisTick: { show: true },type: 'category',data: ['交通', '电力', '煤炭', '建筑'],z: 10}, // 极地坐标polar: {},series: [{type: 'bar',data: [1, 2, 3, 4],coordinateSystem: 'polar',name: 'A',stack: 'a',emphasis: {focus: 'series'}}]
}

常用配置：

图层

graphic:[{ // 一个图形元素，类型是 group，可以嵌套子节点。type: 'group', // group图层组， image图片， text文本，rect矩形，circle圆形，ring环，sector扇形，arc圆弧，polygon几何，polyline折线，line线，bezierCurve二次或三次贝塞尔曲线。children: [{type: 'text',style: {fill: '#1f79ac', // 填充颜色text: '262', // 显示文字font: '3em "STHeiti", sans-serif', // 字体字号x: 50, // x轴位置y: 50// y轴位置}}, {type: 'text',style: {fill: '#1f79ac',text: '亿元',font: '1.2em "STHeiti", sans-serif',x: 130,y: 65}}, {type: 'image',style: {image: require('./img/left1-1.png'),width: 100,height: 150,x: 50,y: 100}}]}
], // 图层

渐变色

option:{ series: [{type: 'line',barWidth: 10, // 柱宽度data: [100, 300, 350, 300, 400],smooth: true, //平滑的折线areaStyle: {normal: {color: {x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#269dc8' // 0% 处的颜色}, {offset: 0.7,color: '#0c1928' // 100% 处的颜色}]}}}, // 填充区域样式itemStyle: {normal: { // 柱状图颜色color: '#269dc8'}}
}

echarts的常用案例相关推荐

ML之FE：特征工程之数据处理常用案例总结(数值型数据处理、类别型数据处理)及其代码实现
ML之FE:特征工程之数据处理常用案例总结(数值型数据处理.类别型数据处理)及其代码实现目录特征工程之数据处理常用案例总结(数值型数据处理.类别型数据处理)及其代码实现
Python语言学习之pandas：DataFrame二维表的简介、常用函数、常用案例之详细攻略
Python语言学习之pandas:DataFrame二维表的简介.常用函数.常用案例之详细攻略目录 DataFrame的简介 DataFrame的常用案例 1.写入和读取excel表格文件
CV之OpenCV：OpenCV库涉及概念、常见函数、常用案例、HALCON软件简介之详细攻略
CV之OpenCV:OpenCV库涉及概念.常见函数.常用案例.HALCON软件简介之详细攻略目录 CV入门 OpenCV使用过程 1.基本教程 OpenCV的相关概念 1.基本概念
iptables详解以及企业常用案例
iptables详解以及企业常用案例 iptables采用netfilter网络架构实现包过滤防火墙,可以实现硬件防火墙的常用功能,亦可以在应用方案中作为硬件防火墙的替代品.在本文档里我们将详细介绍i ...
前端开发常用案例（一）
前端开发常用案例 1.实现三角形百度热榜样式分页效果小米商城自动轮播图效果二级下拉菜单效果时间轴效果展示音乐排行榜效果鼠标移入文字加载动画鼠标悬停缩放效果 1.实现三角形 <! ...
【Echarts】ECharts中常用的标签
详细的标签详解 ECharts中常用的标签 ECharts中常用的标签 title标签 legend tooltip xAxis和yAxis 不同种类图的区别 ECharts中常用的标签 title标 ...
java日期时间库-常用案例-不保留全分享
java日期时间库-常用案例-不保留全分享除了lambda表达式,stream以及几个小的改进之外,Java 8还引入了一套全新的时间日期API,在本篇教程中我们将通过几个简单的任务示例来学习如何使 ...
【C#进阶三】C#正则表达式的使用及常用案例（Regex.IsMatch、Regex.Match，match.NextMatch、Regex.Matches、Regex.Replace等）（实践篇)
文章目录 1. 匹配正则表达式模式:Regex.IsMatch 2.提取单个匹配项或第一个匹配项:Regex.Match(),match.NextMatch() 3.提取所有匹配项Regex.Matc ...
Python语言学习之pandas：DataFrame二维表的简介、常用函数、常用案例(增删改查排序之选择指定列、根据条件选择特定数据、赋值、列名重命名、修改列数据、处理缺失值、列合并、分组之详细攻略
Python语言学习之pandas:DataFrame二维表的简介.常用函数.常用案例(增删改查排序之选择指定列.根据条件选择特定数据.赋值.列名重命名.修改列数据.处理缺失值.列合并.分组之详细攻略 ...

echarts的常用案例

echarts的常用案例相关推荐

最新文章

热门文章