用过很多次ECharts图表，每次用的时候都要查文档，也想过进行记录，总是忙于手头工作或者因为惰性没有落实到文章，这次痛定思痛趁着假期记录下，以下代码基于echarts 5.0.0版本，出于偷懒，直接copy的项目代码，简单做了调整，可以直接放到ECharts对应示例使用，注释应该是够用的，有问题欢迎留言讨论。
横向柱状图
// 坐标轴文字样式 const YDataTextStyle = { color: "#C1E0F9", fontSize: 13, align: "right", fontFamily: "PingFangSC-Regular", }; option = { grid: { top: 10, left: 75, bottom: 10, right: 20, }, xAxis: { type: "value", show: false, }, yAxis: { // 坐标轴线 axisLine: { show: false, }, // 坐标轴刻度 axisTick: { show: false, }, // 坐标轴数据 data: [ { value: "走访宣传", textStyle: YDataTextStyle }, { value: "安全隐患", textStyle: YDataTextStyle }, { value: "疫情防控", textStyle: YDataTextStyle }, { value: "市容环境", textStyle: YDataTextStyle }, { value: "出租屋管理", textStyle: YDataTextStyle }, { value: "社会秩序", textStyle: YDataTextStyle }, { value: "公共服务", textStyle: YDataTextStyle }, { value: "拆迁纠纷", textStyle: YDataTextStyle }, ], }, series: [ { // 类型 type: "bar", // 数据 data: [377, 452, 645, 730, 824, 945, 967, 1264], // 柱子宽度 barWidth: 12, // 顶部文字 label: { show: true, position: "right", valueAnimation: true, fontFamily: "youse", fontSize: 14, color: "#A8DAFC", // {a}：系列名 {b}：数据名 {c}：数据值 formatter: "{c}", // 距离图形距离 distance: 15, }, // 是否显示柱子背景色 showBackground: true, // 柱子背景色样式 backgroundStyle: { color: "rgba(122,188,248,.04)", }, // 柱子样式 itemStyle: { // 边框 borderColor: "#42B1F8", borderWidth: 0.2, // 颜色 color: { type: "linear", x: 0, y: 0, x2: 1, y2: 0, // 渐变色 colorStops: [ { offset: 0, color: "rgba(123,133,167,0.00)", // 0% 处的颜色 }, { offset: 1, color: "rgba(66,177,248,0.40)", // 100% 处的颜色 }, ], }, }, }, ], }; 复制代码
效果如下：
网络异常，图片无法展示
|
纵向柱状图
option = { grid: { top: 30, left: 35, bottom: 50, right: 10, }, legend: { bottom: 5, data: ["热线电话", "巡查上报"], textStyle: { fontFamily: "PingFangSC-Regular", fontSize: 12, color: "#fff", } }, xAxis: [ { type: "category", axisTick: { show: false }, axisLabel: { color: "#C1E0F9", fontSize: 13, fontFamily: "PingFangSC-Regular" }, data: ["5月", "6月", "7月", "8月", "9月", "10月"] } ], yAxis: [ { type: "value", position: "left", axisLine: { show: false, // 横坐标线 lineStyle: { color: "#9EACC1", opacity: 0.1, } }, axisLabel: { color: "#8497AC", fontSize: 12, fontFamily: "PingFangSC-Regular" }, axisTick: { show: false }, // 水平分隔线样式 splitLine: { lineStyle: { color: "#9EACC1", opacity: 0.1 } } } ], series: [ { name: "热线电话", type: "bar", data: [500, 250, 325, 190, 240, 260], // 多个并排柱子设置柱子之间的间距 barGap: "50%", // 柱子宽度 barWidth: 14, // 顶部文字 label: { show: true, position: "top", valueAnimation: true, fontFamily: "Akrobat-Black", fontSize: 16, color: "#65DDBC", formatter: "{c}", // 距离图形距离 distance: 5 }, // 柱子样式 itemStyle: { // 边框 borderColor: "#00E2B4", borderWidth: 0.2, // 颜色 color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "rgba(0,226,180,0.4)",// 底部颜色 }, { offset: 1, color: "rgba(123,133,167,0.00)", // 顶部颜色 } ] } } }, { type: "line", data: [500, 250, 325, 190, 240, 260], lineStyle: { opacity: 0 }, showSymbol: true, // 顶点偏移 symbolOffset: [-11, 0], // 设定为实心点 symbol: "circle", // 设定实心点的大小 symbolSize: 5, // 设定实线点的颜色 color: "#65DDBC" }, { name: "巡查上报", type: "bar", data: [180, 100, 175, 110, 90, 60], // 多个并排柱子设置柱子之间的间距 barGap: "50%", // 柱子宽度 barWidth: 14, // 顶部文字 label: { show: true, position: "top", valueAnimation: true, fontFamily: "Akrobat-Black", fontSize: 16, color: "#FFBB40", formatter: "{c}", // 距离图形距离 distance: 5, }, // 柱子样式 itemStyle: { // 边框 borderColor: "#FFBB40", borderWidth: 0.2, // 颜色 color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "rgba(255,187,64,0.36)", // 底部颜色 }, { offset: 1, color: "rgba(123,133,167,0.00)", // 顶部颜色 } ] } } }, { type: "line", data: [180, 100, 175, 110, 90, 60], lineStyle: { opacity: 0, }, showSymbol: true, // 顶点偏移 symbolOffset: [11, 0], // 设定为实心点 symbol: "circle", // 设定实心点的大小 symbolSize: 5, // 设定实线点的颜色 color: "#FFBB40" } ] }; 复制代码
效果如下：
网络异常，图片无法展示
|
环形图
// 色值数组 const colors = [ '#00B1FF', '#65DDBC', '#9070CA', ' #FFBB40', '#EA5B51', '#0069FF' ], // chart饼图色值数组 colorsForChart = [], // 数据数组 data = [11.2, 17.6, 25.6, 9.6, 20.8, 15.2], // chart饼图数据数组 dataForChart = []; // 设计图饼图之间有间隙，所以数据之间添加固定间隙数值，颜色之间添加tranparent做饼图间隙 // 注：这里只是一个思路，不适合照搬 colors.forEach((item, index) => { colorsForChart.push(item, 'transparent'); dataForChart.push(data[index], 1.5); }); colors.forEach((item, index) => { colorsForChart.push(item, 'transparent'); dataForChart.push(data[index], 1.5); }); option = { series: [ { type: 'pie', radius: ['93%', '100%'], color: colorsForChart, label: { show: false }, data: dataForChart } ] }; 复制代码
效果如下：
网络异常，图片无法展示
|
仪表盘
option = { series: [ { type: "gauge", // 仪表盘半径 radius: "85%", // 最小的数据值 min: 0, // 最大的数据值 max: 30, // 仪表盘起始角度 startAngle: 210, // 仪表盘结束角度 endAngle: -30, // 仪表盘指针样式 这里用来设置仪表盘色值 itemStyle: { color: "#65DDBC", }, // 进度条 progress: { show: true, width: 3 }, // 仪表盘轴线 axisLine: { lineStyle: { width: 3, color: [[1, "#213B69"]], } }, // 刻度样式 axisTick: { show: false, }, // 分隔线样式 splitLine: { show: false }, // 刻度标签 axisLabel: { show: false, }, // 标题 title: { show: false, }, // 仪表盘详情，用于显示数据 detail: { // 中心偏移量 offsetCenter: [0, 0], // 中心文字样式 textStyle: { color: "#65DDBC", fontSize: 20 } }, // 仪表盘指针 pointer: { show: false }, // 表盘中指针的固定点 anchor: { show: false }, // 系列中的数据内容数组 data: [ { value: 16 } ] } ] }; 复制代码
效果如下：
网络异常，图片无法展示
|
