Echarts学习精华的提炼_m0_60264901

网络 02-07 3637

前言

Echarts使用步骤

点位图

里面有些参数我来解释一下：

tooltip：

series系列：

yAxis为y轴；xAxis为x轴

grid绘图网格

legend图例组件

柱状图

itemStyle：

?emphasis:

柱状图中的渐变效果：

?grid系列之刻度线：

xAxis系列参数：

折线图

legend系列之改变位置：

yAxis系列之splitLine：

color图表中的折线线条颜色：

雷达图

radar系列之splitLine、splitArea、axisLine

series系列之symbol、symbolSize、itemStyle、areaeStyle

饼图之环形图

series系列之startAngle、hoverOffset

中国地图

总结

前言

Echarts的出现是由于市场上的需求，应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。

Echarts的可视化效果就是引入了各类图表的绘制，以及高级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图 ...所以这一章节主要是从实际开发过的项目来进行学习。

先来展示一下对于这个知识的“立可得”智能看板应用案例：

其实这个案例的制作整体不是太难，主要是让我们掌握如何应用Echarts来将数据可视化。

这个案例里面引入了5中图表和1张地图的，我就从这些图表的基础配置来介绍Echarts的应用方法

Echarts使用步骤

下载echarts GitHub - apache/echarts at 4.5.0

引入echarts “dist/echarts.min.js”

准备一个具备大小的DOM容器（盒子）来存放图表

初始化echarts实例对象

指定配置项和数据(option)

var myChart = echarts.init(document.getElementById('box')); ?将配置项设置给echarts实例对象 myChart.setOption(option); 如果想让图表能跟着页面的大小而改变自适应可以写：? window.addEventListener("resize", function() { myChart.resize(); });

使用步骤知道后，我们再来学习里面的基础配置！?

点位图

?插入本案例中的代码如下：

// (function(){})();立即执行函数 (function() { // 1.实例化对象 var myChart = echarts.init(document.querySelector(".pie")); // 2.指定配置项和数据 var option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'], series: [ { name: 'Area Mode', type: 'pie', radius: ['10%', '70%'], // radius为百分比就是针对这个容器pie而言 center: ['50%', '50%'], roseType: 'radius', itemStyle: { borderRadius: 5 }, data: [ { value: 20, name: '云南' }, { value: 26, name: '北京' }, { value: 24, name: '山东' }, { value: 25, name: '河北' }, { value: 20, name: '江苏' }, { value: 25, name: '浙江' }, { value: 30, name: '四川' }, { value: 42, name: '湖北' } ], // label对象用于修饰图表中的字体 label: { fontSize: 12, }, // labelLine中注释的线 labelLine: { length: 6, length2: 8 } } ], }; // 3.配置项和数据给我们的实例化对象 myChart.setOption(option); // 4.图标也可以自适应我们的屏幕 window.addEventListener("resize", function() { myChart.resize(); }); })(); 里面有些参数我来解释一下： tooltip： tooltip: { //tooltip提示框组件 trigger: 'item', //trigger触发类型：item——数据项图形触发主要在散点图、饼图等 //axis坐标轴触发主要在柱状图，折线图等 //none 什么都不触发 formatter: '{a} <br/>{b} : {c} ({d}%)' }, series系列： series: [ { name: 'Area Mode', type: 'pie', radius: ['10%', '70%'],// radius为百分比就是针对这个容器pie而言 center: ['50%', '50%'], roseType: 'radius', itemStyle: { borderRadius: 5 }, data: [ //存放自己的数据 { value: 20, name: '云南' }, { value: 26, name: '北京' }, { value: 24, name: '山东' }, { value: 25, name: '河北' }, { value: 20, name: '江苏' }, { value: 25, name: '浙江' }, { value: 30, name: '四川' }, { value: 42, name: '湖北' } ], label: { // label对象用于修饰图表中的字体 fontSize: 12, }, labelLine: { // labelLine中注释的线 length: 6, length2: 8 //其实饼状图上默认有两条注释线引申出来控制线的长短 } } ], yAxis为y轴；xAxis为x轴 grid绘图网格 legend图例组件

如下图所示：

柱状图

??插入本案例中的代码如下：

// 柱状图 (function() { // 把柱形图中的效果放在一个变量中使用时引用 var item = { value: 1200, // itemStyle是对柱子样式进行修改 itemStyle: { color: '#254065' }, // 当鼠标在柱子上没有高光效果 emphasis: { itemStyle: { color: '#254065' } }, // 当鼠标经过提示框中没有提示效果 tooltip: { extraCssText: 'opacity:0' } }; var myChart = echarts.init(document.querySelector(".bar")); var option = { color: new echarts.graphic.LinearGradient( // (x1,y2) 点到点 (x2,y2) 之间进行渐变 0, 0, 0, 1, [ { offset: 0, color: '#00fffb' }, // 0 起始颜色 { offset: 1, color: '#0061ce' } // 1 结束颜色 ] ), tooltip: { trigger: 'item', }, grid: { top: "3%", left: '0%', right: '3%', bottom: '3%', containLabel: true, // show: true, borderColor: 'rgba(0, 240, 255, 0.3)' }, xAxis: [{ type: 'category', data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'], // 刻度设置 axisTick: { // true 图形在刻度中间 alignWithLabel: false, show: false // 不出现刻度 }, axisLabel: { color: "#4c9bfd" }, // x坐标轴颜色设置 axisLine: { lineStyle: { color: 'rgba(0, 240, 255, 0.3)', } } }], yAxis: [{ type: 'value', // 刻度设置 axisTick: { // true 图形在刻度中间 alignWithLabel: false, show: false // 不出现刻度 }, axisLabel: { color: "#4c9bfd" }, // x坐标轴颜色设置 axisLine: { lineStyle: { color: 'rgba(0, 240, 255, 0.3)', } } }], series: [{ name: 'Direct', type: 'bar', barWidth: '60%', data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240 ] }] }; myChart.setOption(option); // 4.图标也可以自适应我们的屏幕 window.addEventListener("resize", function() { myChart.resize(); }); })(); itemStyle： itemStyle: { // itemStyle是对柱子样式进行修改 color: '#254065' }, ?emphasis: emphasis: { // 当鼠标在柱子上没有高光效果 itemStyle: { color: '#254065' } }, 柱状图中的渐变效果： color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ // (x1,y2) 点到点 (x2,y2) 之间进行渐变 { offset: 0, color: '#00fffb' }, // 0 起始颜色 { offset: 1, color: '#0061ce' } // 1 结束颜色 ] ) ?grid系列之刻度线： grid: { top: "3%", left: '0%', right: '3%', bottom: '3%', containLabel: true, // 刻度线出现 show: true, //边框x轴y轴的出现 borderColor: 'rgba(0, 240, 255, 0.3)' //边框x轴y轴的颜色 } xAxis系列参数： xAxis: [{ type: 'category', data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'], axisTick: {// 刻度设置 alignWithLabel: false, // true 图形在刻度中间 show: false // 不出现刻度 }, axisLabel: { //x轴的颜色 color: "#4c9bfd" }, axisLine: { // x坐标轴颜色设置 lineStyle: { color: 'rgba(0, 240, 255, 0.3)', } } }]

折线图

???插入本案例中的代码如下：

// 折线图 (function() { // 准备数据 var data = { year: [ [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120], [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79] ], quarter: [ [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38], [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34] ], month: [ [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36], [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98] ], week: [ [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53], [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24] ] } var myChart = echarts.init(document.querySelector(".line")); var option = { tooltip: { trigger: 'axis' }, legend: { textStyle: { color: '#4c9bfd' // 图例文字颜色 }, right: '10%', // 距离右边10% // 如果series 里面设置了name，那么此时图里组件的data可以省略！！！ // data: ['Email', 'Union Ads'] }, grid: { top: "20%", left: '3%', right: '4%', bottom: '3%', show: true, //显示边框 borderColor: '#012f4a', // 边框颜色 containLabel: true }, xAxis: { type: 'category', boundaryGap: false, // 去除轴内间距 axisTick: { show: false // 去除刻度线 }, axisLabel: { color: '#4c9bfd' // 文本颜色 }, axisLine: { show: false // 去除轴线 }, data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }, yAxis: { type: 'value', axisTick: { show: false // 去除刻度 }, axisLabel: { color: '#4c9bfd' // 文字颜色 }, splitLine: { lineStyle: { color: '#012f4a' // 分割线颜色 } } }, color: ['#00f2f1', '#ed3f35'], //两条曲线改变颜色 series: [{ name: '预期销售额', type: 'line', smooth: true, stack: "总量", data: data.year[0] }, { name: '实际销售额', type: 'line', smooth: true, stack: "总量", data: data.year[1] } ] }; myChart.setOption(option); // 4.图标也可以自适应我们的屏幕 window.addEventListener("resize", function() { myChart.resize(); legend系列之改变位置： legend: { textStyle: { color: '#4c9bfd' // 图例文字颜色 }, right: '10%', // 距离右边10% // data: ['Email', 'Union Ads'] // 如果series 里面设置了name，那么此时图里组件的data可以省略！！！ } yAxis系列之splitLine： yAxis: { type: 'value', axisTick: { show: false // 去除刻度 }, axisLabel: { color: '#4c9bfd' // 文字颜色 }, splitLine: { lineStyle: { color: '#012f4a' // 分割线颜色 } } } color图表中的折线线条颜色： color: ['#00f2f1', '#ed3f35'], //两条曲线改变颜色

雷达图

????插入本案例中的代码如下：

// 雷达图 (function() { var myChart = echarts.init(document.querySelector(".radar")); var dataBJ = [ [90, 19, 56, 11, 34] ]; var lineStyle = { width: 1, opacity: 0.5 }; var option = { tooltip: { show: true, // 控制提示框组件的显示位置 position: ['60%', '10%'], }, legend: { bottom: 5, data: ['Beijing'], itemGap: 20, textStyle: { color: '#fff', fontSize: 14 }, selectedMode: 'single' }, radar: { center: ['50%', '50%'], // radius 外半径(最大的圆)占据容器大小 radius: '65%', indicator: [ { name: '机场', max: 100 }, { name: '商场', max: 100 }, { name: '火车站', max: 100 }, { name: '汽车站', max: 100 }, { name: '地铁', max: 100 } ], shape: 'circle', // 指示器轴的分割段数 splitNumber: 4, axisName: { color: 'rgb(238, 197, 102)' }, splitLine: { // 坐标轴在 grid 区域中的分隔线（圆圈） lineStyle: { color: 'rgba(255, 255, 255, 0.5)', } // 如果说要圆圈渐变的效果就用color数组装不同的颜色 /* color: [ "rgba(238, 197, 102, 0.1)", "rgba(238, 197, 102, 0.2)", "rgba(238, 197, 102, 0.4)", "rgba(238, 197, 102, 0.6)", "rgba(238, 197, 102, 0.8)", "rgba(238, 197, 102, 1)" ].reverse() */ }, splitArea: { show: false }, // axisLine也就是雷达图的分割线也是坐标轴 axisLine: { show: true, lineStyle: { color: 'rgba(255, 255, 255, 0.5)' } } }, series: [{ name: "北京", type: 'radar', // 填充区域的线条颜色 lineStyle: lineStyle = { normal: { color: '#fff', // width: 1 } }, data: dataBJ, // data: [[90, 19, 56, 11, 34]],也可以直接这么表达 // symbol 标记的样式(拐点），还可以取值'rect' 方块 ,'arrow' 三角等 symbol: 'circle', // 拐点的大小 symbolSize: 5, // 小圆点（拐点）设置为白色 itemStyle: { color: '#fff' }, // 在圆点上显示相关数据 label: { show: true, color: '#fff', fontSize: 10 }, areaStyle: { opacity: 0.1 }, name: { // 修饰雷达图文本颜色 textStyle: { color: '#4c9bfd' } }, // 区域填充的背景颜色设置 areaStyle: { color: 'rgba(238, 197, 102, 0.6)', }, }] }; myChart.setOption(option); window.addEventListener("resize", function() { myChart.resize(); }); })(); radar系列之splitLine、splitArea、axisLine radar: { center: ['50%', '50%'], // radius 外半径(最大的圆)占据容器大小 radius: '65%', indicator: [ { name: '机场', max: 100 }, { name: '商场', max: 100 }, { name: '火车站', max: 100 }, { name: '汽车站', max: 100 }, { name: '地铁', max: 100 } ], shape: 'circle', splitNumber: 4, // 指示器轴的分割段数 axisName: { color: 'rgb(238, 197, 102)' }, splitLine: { lineStyle: { // 坐标轴在 grid 区域中的分隔线（圆圈） color: 'rgba(255, 255, 255, 0.5)', } // 如果说要圆圈渐变的效果就用color数组装不同的颜色 /* color: [ "rgba(238, 197, 102, 0.1)", "rgba(238, 197, 102, 0.2)", "rgba(238, 197, 102, 0.4)", "rgba(238, 197, 102, 0.6)", "rgba(238, 197, 102, 0.8)", "rgba(238, 197, 102, 1)" ].reverse() */ }, splitArea: { show: false //grid区域中的分隔区域，默认不显示 }, axisLine: { // axisLine也就是雷达图的分割线也是坐标轴 show: true, lineStyle: { color: 'rgba(255, 255, 255, 0.5)' } } } series系列之symbol、symbolSize、itemStyle、areaeStyle series: [{ name: "北京", type: 'radar', // 填充区域的线条颜色 lineStyle: lineStyle = { normal: { color: '#fff', // width: 1 } }, data: [[90, 19, 56, 11, 34]]， symbol: 'circle', // symbol 标记的样式(拐点）， //还可以取值'rect' 方块 ,'arrow' 三角等 symbolSize: 5, // 拐点的大小 itemStyle: { // 小圆点（拐点）设置为白色 color: '#fff' }, label: { // 在圆点上显示相关数据 show: true, color: '#fff', fontSize: 10 }, areaStyle: { opacity: 0.1 }, name: { textStyle: { // 修饰雷达图文本颜色 color: '#4c9bfd' } }, areaStyle: { // 区域填充的背景颜色设置 color: 'rgba(238, 197, 102, 0.6)', }, }]

饼图之环形图

?????插入本案例中的代码如下：

// 半圆形的饼形图gauge (function() { var myChart = echarts.init(document.querySelector(".gauge")); var option = { series: [{ name: "销售进度", type: "pie", // 放大图形 radius: ['130%', '150%'], // 移动下位置套住50%文字 center: ['48%', '80%'], //是否启用防止标签重叠策略 // avoidLabelOverlap: false, labelLine: { normal: { show: false } }, // 起始角度，支持范围[0, 360] startAngle: 180, // 鼠标经过不变大 hoverOffset: 0, data: [{ value: 100, itemStyle: { // 颜色渐变#00c9e0->#005fc1 color: new echarts.graphic.LinearGradient( // (x1,y2) 点到点 (x2,y2) 之间进行渐变 0, 0, 0, 1, [ { offset: 0, color: "#00c9e0" }, // 0 起始颜色 { offset: 1, color: "#005fc1" } // 1 结束颜色 ] ) } }, { value: 100, itemStyle: { color: '#12274d' } }, { value: 200, itemStyle: { color: 'transparent' } } // 透明隐藏第三块区域 ] }] }; myChart.setOption(option); // 4.图标也可以自适应我们的屏幕 window.addEventListener("resize", function() { myChart.resize(); }); })(); series系列之startAngle、hoverOffset series: [{ name: "销售进度", type: "pie", // 放大图形 radius: ['130%', '150%'], // 移动下位置套住50%文字 center: ['48%', '80%'], //是否启用防止标签重叠策略 // avoidLabelOverlap: false, labelLine: { normal: { show: false } }, // 起始角度，支持范围[0, 360] startAngle: 180, // 鼠标经过不变大 hoverOffset: 0, data: [{ value: 100, itemStyle: { // 颜色渐变#00c9e0->#005fc1 color: new echarts.graphic.LinearGradient( // (x1,y2) 点到点 (x2,y2) 之间进行渐变 0, 0, 0, 1, [ { offset: 0, color: "#00c9e0" }, // 0 起始颜色 { offset: 1, color: "#005fc1" } // 1 结束颜色 ] ) } }, { value: 100, itemStyle: { color: '#12274d' } }, { value: 200, itemStyle: { color: 'transparent' } } // 透明隐藏第三块区域 ] }]

为了让饼图如下图所示效果需要进行旋转角度：

中国地图

?先在Echarts里面下载自己想要的地图js文件然后把地图中的样式复制放在另一个js文件总结

以上就是Echarts的所有内容，如果对你有帮助就不要吝啬大佬们的大拇指，给个赞👍

不要吝啬你们的一键三连~