本文共 17628 字，大约阅读时间需要 58 分钟。
主要目的：借助于图形化手段，清晰有效地传达与沟通信息营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。flexible.js 把屏幕分为 24 等份 flexible.js是淘宝官方H5移动适配解决方案px2rwd 插件的基准值是 80px webstorm 中将px转换为rem的插件Preferences中的Px to Rwd设置基准值重新启动webstorm数据可视化库： D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)ECharts.js 百度出品的一个开源 Javascript 数据可视化库Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用AntV 蚂蚁金服全新一代数据可视化解决方案Highcharts 和 Echarts 就像是 Office 和 WPS 的关系ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
总结：
是一个JS插件
性能好可流畅运行PC与移动设备
兼容主流浏览器
提供很多常用图表，且可定制
官网地址：
官方教程：
使用步骤：
echarts 插件文件到html页面中DOM容器初始化echarts实例对象var myChart = echarts.init(document.getElementById('main')); 指定配置项和数据(option)var option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }]}; 将配置项设置给echarts实例对象myChart.setOption(option);
需要了解的主要配置：
seriesxAxisyAxisgridtooltiptitlelegendcolor
series
系列列表，每个系列通过 type 决定自己的图表类型图标数据，指定什么类型的图标，可以多个图表重叠。xAxis
直角坐标系 grid 中的 x 轴boundaryGap true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间yAxis----- 直角坐标系 grid 中的 y 轴
grid----- 直角坐标系内绘图网格
title----- 标题组件
tooltip----- 提示框组件
legend-----图例组件
color-----调色盘颜色列表
数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。
option = { // color设置我们线条的颜色 注意后面是个数组 color: ['pink', 'red', 'green', 'skyblue'], // 设置图表的标题 title: { text: '折线图堆叠123' }, // 图表的提示框组件 tooltip: { // 触发方式 trigger: 'axis' }, // 图例组件 legend: { // series里面有了 name值则 legend里面的data可以删掉 }, // 网格配置 grid可以控制线形图 柱状图 图表大小 grid: { left: '3%', right: '4%', bottom: '3%', // 是否显示刻度标签 如果是true 就显示 否则反之 containLabel: true }, // 工具箱组件 可以另存为图片等功能 toolbox: { feature: { saveAsImage: { } } }, // 设置x轴的相关配置 xAxis: { type: 'category', // 是否让我们的线条和坐标轴有缝隙 boundaryGap: false, data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日'] }, // 设置y轴的相关配置 yAxis: { type: 'value' }, // 系列图表配置 它决定着显示那种类型的图表 series: [ { name: '邮件营销', type: 'line', data: [120, 132, 101, 134, 90, 230, 210] }, { name: '联盟广告', type: 'line', data: [220, 182, 191, 234, 290, 330, 310] }, { name: '视频广告', type: 'line', data: [150, 232, 201, 154, 190, 330, 410] }, { name: '直接访问', type: 'line', data: [320, 332, 301, 334, 390, 330, 320] } ]}; 引入到html页面中// 柱状图1模块(function() { // 实例化对象 let myChart = echarts.init(document.querySelector(".bar .chart")); // 指定配置和数据 let option = { color: ["#3398DB"], tooltip: { trigger: "axis", axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: "shadow" // 默认为直线，可选为：'line' | 'shadow' } }, grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true }, xAxis: [ { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], axisTick: { alignWithLabel: true } } ], yAxis: [ { type: "value" } ], series: [ { name: "直接访问", type: "bar", barWidth: "60%", data: [10, 52, 200, 334, 390, 330, 220] } ] }; // 把配置给实例对象 myChart.setOption(option);})(); 根据需求定制color: ["#2f89cf"],grid: { left: "0%", top: "10px", right: "0%", bottom: "4%", containLabel: true}, X轴相关设置 xAxis // 设置x轴标签文字样式// x轴的文字颜色和大小 axisLabel: { color: "rgba(255,255,255,.6)", fontSize: "12" },// x轴样式不显示axisLine: { show: false // 如果想要设置单独的线条样式 // lineStyle: { // color: "rgba(255,255,255,.1)", // width: 1, // type: "solid" }} Y 轴相关定制 // y 轴文字标签样式axisLabel: { color: "rgba(255,255,255,.6)", fontSize: "12"}, // y轴线条样式 axisLine: { lineStyle: { color: "rgba(255,255,255,.1)", // width: 1, // type: "solid" }5232}, // y 轴分隔线样式splitLine: { lineStyle: { color: "rgba(255,255,255,.1)" }} series 里面设置series: [ { name: "直接访问", type: "bar", // 修改柱子宽度 barWidth: "35%", data: [10, 52, 200, 334, 390, 330, 220], itemStyle: { // 修改柱子圆角 barBorderRadius: 5 } } ] }; 更换对应数据// x轴中更换data数据 data: [ "旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业" ],// series 更换数据 data: [200, 300, 300, 900, 1500, 1200, 600]
让图表跟随屏幕自适应window.addEventListener("resize", function() { myChart.resize();}); 修改图形大小 grid// 图标位置 grid: { top: "10%", left: "22%", bottom: "10%" }, 不显示x轴xAxis: { show: false }, y轴相关定制//不显示y轴线条axisLine: { show: false },// 不显示刻度axisTick: { show: false}, axisLabel: { color: "#fff" }, 修改第一组柱子相关样式（条状）name: "条",// 柱子之间的距离barCategoryGap: 50,//柱子的宽度barWidth: 10,// 柱子设为圆角itemStyle: { normal: { barBorderRadius: 20, }}, // 图形上的文本标签label: { normal: { show: true, // 图形内显示 position: "inside", // 文字的显示格式 formatter: "{c}%" }}, // 声明颜色数组var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];// 2. 给 itemStyle 里面的color 属性设置一个 返回值函数 itemStyle: { normal: { barBorderRadius: 20, // params 传进来的是柱子对象 console.log(params); // dataIndex 是当前柱子的索引号 return myColor[params.dataIndex]; } }, name: "框", type: "bar", barCategoryGap: 50, barWidth: 15, itemStyle: { color: "none", borderColor: "#00c1de", borderWidth: 3, barBorderRadius: 15 }, data: [19325, 23438, 31000, 121594, 134141, 681807] } yAxis: [ { type: "category", data: ["印尼", "美国", "印度", "中国", "世界人口(万)"], // 不显示y轴的线 axisLine: { show: false }, // 不显示刻度 axisTick: { show: false }, // 把刻度标签里面的文字颜色设置为白色 axisLabel: { color: "#fff" } }, { show: true, data: [702, 350, 610, 793, 664], // 不显示y轴的线 axisLine: { show: false }, // 不显示刻度 axisTick: { show: false }, axisLabel: { textStyle: { fontSize: 12, color: "#fff" } } } ], // 给series 第一个对象里面的 添加 yAxisIndex: 0,// 给series 第二个对象里面的 添加 yAxisIndex: 1,// series 第一个对象里面的datadata: [70, 34, 60, 78, 69],// series 第二个对象里面的datadata: [100, 100, 100, 100, 100],// y轴更换第一个对象更换data数据data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"],// y轴更换第二个对象更换data数据data:[702, 350, 610, 793, 664],
// 设置网格样式 grid: { top: '20%', left: '3%', right: '4%', bottom: '3%', show: true,// 显示边框 borderColor: '#012f4a',// 边框颜色 containLabel: true // 包含刻度文字在内 }, // 图例组件 legend: { textStyle: { color: '#4c9bfd' // 图例文字颜色 }, right: '10%' // 距离右边10% }, xAxis: { type: 'category', data: ["周一", "周二"], axisTick: { show: false // 去除刻度线 }, axisLabel: { color: '#4c9bfd' // 文本颜色 }, axisLine: { show: false // 去除轴线 }, boundaryGap: false // 去除轴内间距 }, yAxis: { type: 'value', axisTick: { show: false // 去除刻度 }, axisLabel: { color: '#4c9bfd' // 文字颜色 }, splitLine: { lineStyle: { color: '#012f4a' // 分割线颜色 } } }, color: ['#00f2f1', '#ed3f35'], series: [{ name:'新增粉丝', data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', // 折线修饰为圆滑 smooth: true, },{ name:'新增游客', data: [100, 331, 200, 123, 233, 543, 400], type: 'line', smooth: true, }] // x轴的文字xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], // 图标数据 series: [{ name:'新增粉丝', data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120], type: 'line', smooth: true },{ name:'新增游客', data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79], type: 'line', smooth: true } }] 以下是后台送过来数据（ajax请求过来的）
var yearData = [ { year: '2020', // 年份 data: [ // 两个数组是因为有两条线 [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120], [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79] ] }, { year: '2021', // 年份 data: [ // 两个数组是因为有两条线 [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38], [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34] ] } ]; legend: { top: "0%", textStyle: { color: "rgba(255,255,255,.5)", fontSize: "12" }}, grid: { left: "10", top: "30", right: "10", bottom: "10", containLabel: true }, // 文本颜色为rgba(255,255,255,.6) 文字大小为 12 axisLabel: { textStyle: { color: "rgba(255,255,255,.6)", fontSize: 12 } }, // x轴线的颜色为 rgba(255,255,255,.2) axisLine: { lineStyle: { color: "rgba(255,255,255,.2)" } }, axisTick: { show: false }, axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } }, axisLabel: { textStyle: { color: "rgba(255,255,255,.6)", fontSize: 12 } }, // 修改分割线的颜色 splitLine: { lineStyle: { color: "rgba(255,255,255,.1)" } } //第一条 线是圆滑 smooth: true, // 单独修改线的样式 lineStyle: { color: "#0184d5", width: 2 }, // 填充区域 areaStyle: { // 渐变色，只需要复制即可 color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色 }, { offset: 0.8, color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色 } ], false ), shadowColor: "rgba(0, 0, 0, 0.1)" }, // 设置拐点 小圆点 symbol: "circle", // 拐点大小 symbolSize: 8, // 设置拐点颜色以及边框 itemStyle: { color: "#0184d5", borderColor: "rgba(221, 220, 107, .1)", borderWidth: 12 }, // 开始不显示拐点， 鼠标经过显示 showSymbol: false, name: "转发量", type: "line", smooth: true, lineStyle: { normal: { color: "#00d887", width: 2 } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: "rgba(0, 216, 135, 0.4)" }, { offset: 0.8, color: "rgba(0, 216, 135, 0.1)" } ], false ), shadowColor: "rgba(0, 0, 0, 0.1)" } }, // 设置拐点 小圆点 symbol: "circle", // 拐点大小 symbolSize: 5, // 设置拐点颜色以及边框 itemStyle: { color: "#00d887", borderColor: "rgba(221, 220, 107, .1)", borderWidth: 12 }, // 开始不显示拐点， 鼠标经过显示 showSymbol: false, // x轴更换数据data: [ "01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","26","28","29","30"],// series 第一个对象data数据 data: [ 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 20,60,50, 40],// series 第二个对象data数据 data: [ 130, 10, 20, 40,30, 40, 80,60,20, 40, 90, 40,20, 140,30, 40, 130,20,20, 40, 80, 70, 30, 40,30, 120, 20,99,50, 20],
定制图表需求1：
legend: { // 距离底部为0% bottom: "0%", // 小图标的宽度和高度 itemWidth: 10, itemHeight: 10, data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'], // 修改图例组件的文字为 12px textStyle: { color: "rgba(255,255,255,.5)", fontSize: "12" } }, 定制需求2：
series: [ { name: "年龄分布", type: "pie", // 设置饼形图在容器中的位置 center: ["50%", "50%"], // 修改内圆半径和外圆半径为 百分比是相对于容器宽度来说的 radius: ["40%", "60%"], // 不显示标签文字 label: { show: false }, // 不显示连接线 labelLine: { show: false }, } ] 定制需求3：更换数据
// legend 中的data 可省略data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],// series 中的数据 data: [ { value: 1, name: "0岁以下" }, { value: 4, name: "20-29岁" }, { value: 2, name: "30-39岁" }, { value: 2, name: "40-49岁" }, { value: 1, name: "50岁以上" } ] , 定制需求4： 更换颜色
color: [ "#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab", ],
// 4. 让图表跟随屏幕自动的去适应 window.addEventListener("resize", function() { myChart.resize(); }); 第二步：按照需求定制
color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
radius: ['10%', '70%'],
roseType: "radius",
{ value: 20, name: '云南' }, { value: 26, name: '北京' }, { value: 24, name: '山东' }, { value: 25, name: '河北' }, { value: 20, name: '江苏' }, { value: 25, name: '浙江' }, { value: 30, name: '四川' }, { value: 42, name: '湖北' } 需求5：字体略小些 10 px ( series对象里面设置 )
饼图图形上的文本标签可以控制饼形图的文字的一些样式。 label 对象设置
series: [ { name: "面积模式", type: "pie", radius: [30, 110], center: ["50%", "50%"], roseType: "radius", // 文本标签控制饼形图文字的相关样式， 注意它是一个对象 label: { fontSize: 10 }, } ] }; + // 文字调整+ label:{+ fontSize: 10+ },+ // 引导线调整+ labelLine: {+ // 连接扇形图线长+ length: 6,+ // 连接文字线长+ length2: 8+ } + }+ ], // 监听浏览器缩放，图表对象调用缩放resize函数window.addEventListener("resize", function() { myChart.resize(); }); 就是一些，活跃的echart使用者，交流和贡献定制好的图表的地方。
参考社区的例子：
(模拟飞机航线)实现步骤：
china.js提供中国地图的js文件需要修改：
geo: { map: 'china', zoom: 1.2, label: { emphasis: { show: false } }, roam: false, itemStyle: { normal: { areaColor: '#142957', borderColor: '#0692a4' }, emphasis: { areaColor: '#0b1c2d' } } }, 总结：这例子是扩展案例，大家以后可以多看看社区里面的案例。
/* 约束屏幕尺寸 */@media screen and (max-width: 1024px) { html { font-size: 42px !important; }}@media screen and (min-width: 1920px) { html { font-size: 80px !important; }} 转载地址：http://odqwi.baihongyu.com/