Echarts

关于echarts:echart能实现自定义折线图吗

相似这样的折线图，能用echart实现吗？或者用其余插件实现。有示例demo吗？有偿

关于echarts:人人都能看懂的ECharts-数据缩放组件

本文首发自「慕课网」，想理解更多IT干货内容，程序员圈内热闻，欢送关注"慕课网"！作者：范文杰_fe|慕课网讲师在一个数据图表中，可能因为数据所示意的工夫范畴较大，从而导致整个图表相当的长，当这些数据都不得不展现的时候，对咱们剖析某一段时间内数据的变动造成的极大的影响，所以当咱们遇到这种状况的时候就须要用到 ECharts 的数据缩放组件了。 1. 简介官网解释： dataZoom 组件用于区域缩放，从而能自在关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。慕课解释 dataZoom 组件提供了一套在图表运行状态下，终端用户能够通过鼠标、手指（触屏下）的动作触发图表视图窗口变动，使图表聚焦在某个部分区域的交互性能。dataZoom 有 3 个变种： inside：内置于图表的缩放组件，用户能够在图表上间接操作缩放动作；slider：独立与图表外的缩放组件，是三个变种中惟一具备视觉组件的类型，用户次要在滑块上实现交互；select：框选模式，须要在 toolbox 中配置应用。2. 实例解析原理上，dataZoom 通过管制坐标轴的数值范畴实现图表视图窗口的变动，所以对于开发者来说，无论应用变种，最根本的须要确定 dataZoom 管制的是那个（或那些）数轴，以及对其余数轴的影响。 Tips： dataZoom 只实用于直角坐标系、极坐标系，对于地图、日历坐标系等可思考应用 visualmap 组件。2.1 选定主轴应用 dataZoom 的第一步是确定缩放组件要管制那一条坐标轴，办法很简略，在直角坐标系下通过设定 xAxisIndex或 yAxisIndex 为对应坐标轴下标；极坐标系下通过设定 radiusAxisIndex 或 angleAxisIndex 为对应坐标轴下标即可。例如下例设定两个 dataZoom 实例并别离指向两个不同类型的坐标轴： <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <title>Echarts Example</title> </head> <body> <div id="main" style="width: 1020px; height: 400px;"></div> <script src="//cdn.bootcss.com/echarts/4.5.0/echarts.js"></script> <script type="text/javascript"> const random = (min, max) => Math.round(Math.random() * (max - min) + min); const myChart = echarts.init(document.getElementById('main')); const option = { toolbox: { feature: { saveAsImage: {}, }, }, dataZoom: [ // 作用在直角坐标系上 { type: 'slider', xAxisIndex: 0, right: '55%', left: 0 }, // 作用在极坐标系上 { type: 'slider', angleAxisIndex: 0, left: '55%', right: '5%' }, ], grid: { left: 0, containLabel: true, width: '45%' }, xAxis: { type: 'value' }, yAxis: { type: 'category' }, polar: { left: '50%', containLabel: true, radius: '55%', center: ['77%', '50%'] }, angleAxis: { type: 'category' }, radiusAxis: { type: 'value' }, series: [ { data: genSeriesData(7), type: 'bar', }, { data: genSeriesData(7), type: 'bar', coordinateSystem: 'polar', }, ], }; myChart.setOption(option); function genSeriesData(len) { const result = []; for (let i = 0; i < len; i += 1) { const node = [random(10, 100), `S${i + 1}`]; result.push(node); } return result; } </script> </body></html>示例成果： ...

关于echarts:移动端Echarts横屏进入退出效果

每天学习一点点，每天记录一点点、每天提高一点点——————《伊索寓言》效果图代码<template> <div class="outWrap"> <div :class=" isHorizontalScreen ? 'horizontalEchartsFather' : 'verticalEchartsFather' " >  <h3 @click="switchFn" :class="isHorizontalScreen ? 'horizontalIcon' : 'verticalIcon'" > {{ isHorizontalScreen ? "退出横屏" : "进入横屏" }} </h3>  <div id="echartsId" :class="isHorizontalScreen ? 'horizontal' : 'vertical'" ></div> </div> </div></template><script>import Echarts from "echarts";export default { data() { return { myChart: null, // echarts的实例 isFull: false, // 是否全屏 isHorizontalScreen: false, // 是否是横向屏幕，默认false，默认是竖向屏幕 option: { dataZoom: [ { type: "inside", }, ], xAxis: { data: [ "4.1", "4.2", "4.3", "4.4", "4.5", "4.6", "4.7", "4.8", "4.9", "4.10", "4.11", "4.12", "4.13", "4.14", "4.15", "4.16", "4.17", ], }, yAxis: {}, series: { name: "股价", type: "line", data: [ 51, 61, 71, 27, 19, 20, 15, 8, 21, 2, 19, 66, 88, 4, 21, 77, 6, ], itemStyle: { normal: { color: "green", //扭转折线点的色彩 lineStyle: { color: "green", //扭转折线色彩 }, }, }, }, }, }; }, watch: { // 当横屏进入退出要重绘一下echarts isHorizontalScreen(newVal) { console.log("横屏切换", newVal); this.myChart.setOption(this.option, true); this.$nextTick(() => { this.resize(); }); }, }, mounted() { // 增加自适应监听 window.addEventListener("resize", this.resize); this.echarts(); }, methods: { // 初始化 echarts() { this.myChart = Echarts.init(document.querySelector("#echartsId")); this.myChart.setOption(this.option); }, resize() { this.myChart.resize(); // 窗口大小发生变化的时候重置 }, // 切换程度垂直~全屏默认屏 switchFn() { this.isHorizontalScreen = !this.isHorizontalScreen; this.isFull = !this.isFull; }, }, // 移除自适应监听 beforeDestroy() { window.removeEventListener("resize", this.resize); },};</script><style lang="less" scoped>// 最外层满屏.outWrap { width: 100%; height: 100vh; background: #e9e9e9;}/* 用于给竖向echarts画布定位用 */.verticalEchartsFather { width: 100%; height: 50%; background-color: #fff; position: relative;}// 竖向的失常百分比即可.vertical { width: 100%; height: 100%;}/* 用于给横向echarts画布定位用，横向就旋转90度即可 */.horizontalEchartsFather { transform: rotate(90deg); position: relative; width: 100%;}// 因为横向了，所以颠倒一下.horizontal { width: 100vh; height: 100vw;}/* 进入横屏和退出横屏两套款式，定位在不同的地位 */.verticalIcon { position: absolute; top: 2px; right: 6px; z-index: 999; user-select: none;}.horizontalIcon { position: absolute; top: 2px; left: 6px; z-index: 999; user-select: none;}</style>总结横屏的时候，即为竖屏旋转90度，加上监听管制，而后改一下款式，最初别忘了重绘一下Echarts ...

关于echarts:Echarts的tooltip中动态单位设置使用formatter函数加工

需要形容可视化折线图有好几条线，不同的线条单位不一样在鼠标悬浮tooltip的时候，将对应单位对应增加效果图思路：应用tooltip中的formatter函数去管制即可代码复制粘贴即可应用，不难，可能一时间想不到... <template> <div class="demo"> <div ref="myDiv" class="echart_line" /> </div></template><script>import * as echarts from "echarts";export default { data() { return { unit: "", // 变量单位赋值 legendData: ["甲", "乙", "丙", "丁"], // 图表应用的一系列数据 series: [ { unit: "米", type: "line", data: [ 95, 16, 66, 51, 15, 15, 15, 4, 16, 5, 115, 55, 114, 56, 15, 77, 15, 99, 153, 22, 33, 88, 23, 11, 33, 46, 22, 11, 6, 129, ], name: "甲", }, { unit: "千克", type: "line", data: [ 139, 27, 60, 0, 60, 99, 11, 77, 88, 54, 68, 99, 60, 99, 24, 12, 18, 133, 99, 54, 60, 24, 60, 54, 60, 99, 88, 111, 99, 60, ], name: "乙", }, { unit: "秒", type: "line", data: [ 54, 14, 3, 69, 23, 88, 60, 54, 60, 54, 16, 72, 54, 14, 19, 34, 36, 6, 14, 54, 99, 19, 60, 27, 41, 14, 32, 72, 82, 92, ], name: "丙", }, { unit: "安培/摩尔", type: "line", data: [ 5, 72, 13, 1, 115, 82, 63, 14, 125, 99, 121, 135, 54, 15, 35, 15, 2.5, 47, 31, 23, 15, 9, 14, 7, 15, 48, 88, 123, 31, 49, ], name: "丁", // yAxisIndex: 0, // 1 可设置左侧和右侧y轴线条... }, ], // x轴刻度数值 dataX: [ "2023-03-01", "2023-03-02", "2023-03-03", "2023-03-04", "2023-03-05", "2023-03-06", "2023-03-07", "2023-03-08", "2023-03-09", "2023-03-10", "2023-03-11", "2023-03-12", "2023-03-13", "2023-03-14", "2023-03-15", "2023-03-16", "2023-03-17", "2023-03-18", "2023-03-19", "2023-03-20", "2023-03-21", "2023-03-22", "2023-03-23", "2023-03-24", "2023-03-25", "2023-03-26", "2023-03-27", "2023-03-28", "2023-03-29", "2023-03-30", ], }; }, mounted() { this.chart(); }, methods: { chart() { this.$nextTick(() => { var that = this; // 初始化一个Echarts this.myChart = echarts.init(this.$refs.myDiv); // 给Echarts设置对应的配置缠住 this.myChart.setOption({ color: ["#F26522", "#8DC63F", "#00AEEF", "#FFC20E"], // 图表左上方的圆点图例 legend: { type: "scroll", data: that.legendData, icon: "circle", itemHeight: 10, top: 4, left: 24, }, // x轴的设置 xAxis: { type: "category", // x轴的凸起小竖点 axisTick: { show: true, inside: true, lineStyle: { color: "#999", }, }, // x轴的线条色彩 axisLine: { lineStyle: { type: "dashed", color: "#999", }, }, // x轴应用的数据 data: that.dataX, // x轴的文字设置 axisLabel: { margin: 8, interval: 7, formatter: function (params) { return (params = params.slice(0)); }, }, }, // y轴的设置 yAxis: [ { type: "value", name: "(KPA)", // 左上方的圆点下方 nameTextStyle: { // 设置地位 padding: [10, 0, 0, -20], }, axisLine: { show: false, // 最左侧的y轴的线条将其暗藏 lineStyle: { color: "#BDBDBD", // 另外的色彩设置，如刻度数值 }, }, splitLine: { show: true, // 显示横向分隔线 lineStyle: { type: "dashed", // 款式为虚线 color: "#e1e1e1", // 设置对应分隔线的色彩 }, }, min: 0, // 设置左侧Y轴的最小刻度从哪里开始，此案例从0开始 max: function (value) { // 设置最大值，即为最大值，当然也能够再加点 // return value.max; return value.max + 12; }, }, ], // 鼠标悬浮提示框 tooltip: { trigger: "axis", // 触发 // 轴指针 axisPointer: { // 鼠标款式 animation: true, // 竖线条款式 lineStyle: { color: "#123", // 设置色彩 width: 2, // 宽度 opacity: 0.8, }, }, /** * 重点是这个tooltip的formatter加工函数 * */ formatter: function (format) { /** * 依据format参数定义动静dom * */ var result = `<div style="height:100%; min-height:${30 + 28 * format.length}px; width: 200px; background: rgba(255, 255, 255, 0.27); " > <div style="width: 100%; height: 30px; padding-left:10px; background: rgba(0, 0, 0, 0.79); font-size: 14px; line-height: 30px; color: #ffffff; " > ${name ? name : format[0].name} </div> <div style=" height: 100%; padding-left:10px; width: 100%; border-radius: 3px; " > `; /** * 遍历判断动静增加dom单位 * */ format.map((item) => { // console.log("item", item); that.series.map((it, index) => { if (index == item.seriesIndex) { // 索引要对上 that.unit = it.unit; } }); result += "<div style='height: 28px;line-height:28px'>" + '<span style="display:inline-block;margin-right:5px;border-radius:20px;width:10px;height:10px;background-color:' + item.color + '"></span>' + item.seriesName + " : " + item.value + that.unit; ("</div>"); }); result += "</div>"; return result; }, }, // 图表应用的一系列数据 series: that.series, // 图表距容器的间隔 grid: { bottom: 60, left: "4%", right: "2%", }, // 区域缩放配置 dataZoom: [ { type: "slider", start: 0, end: 50, backgroundColor: "#e9e9e9", fillerColor: "#666", opacity: 0.2, show: true, height: "24ph", bottom: "12ph", }, ], }); // 增加自适应 window.addEventListener("resize", this.resizeFn); }); }, // 自适应函数 resizeFn() { this.myChart.resize(); }, }, beforeDestroy() { // 销毁时候移除resize事件 window.removeEventListener("resize", this.resizeFn); },};</script><style>.echart_line { width: 900px; height: 600px; border: 1px dotted #159;}</style>总结很多货色，很快就忘记录一下，留个印象他日再用，找到文章复制粘贴，不忙不慌

关于echarts:学会这招地图随便下钻

前言之前的一个我的项目要在内网部署，这时高德地图须要走代理，在公司申请代理资源是一件极其繁琐的事件（手动狗头），退而求其次，将其中采纳地图局部用echarts代替，性能也产生了一些变动。如下图所示的定位查找改为点击下钻，这篇文章具体说一下Echarts多层级下钻及返回性能的实现过程思路===> 创立初始化地图 ===> 点击获取下一层地图数据 ===> 记录每一步地图所处层级 ===> 返回上一级实现1. 创立初始化地图应用echarts 画地图有两种办法,一种是通过js，一种是json，咱们这里通过json文件绘制从echart 的文档上来看，咱们在echart中应用 geo 和应用 series 来绘制地图，它们之间有一点轻微的差异，能够忽略不计。创立一个函数页面加载后调用 onMounted(() => { getAreaCounty('邵阳市')})const getAreaCounty = (name) => { // 我从后盾获取json数据的接口函数 apiAreaCounty({ parent: name }).then((res) => { // 获取绘制容器 mychart = echarts.init(chart.value) // 绘制地图 initEcharts(res, name, mychart) mychart.on('click', (params) => { // 点击下钻的操作写在这里 }) })}const initEcharts = (geoJson, name, mychart) => { echarts.registerMap(name, geoJson) let option = { series: [ { show: true, type: 'map', map: name, itemStyle: { areaColor: '#1890ff' } } ] } mychart.setOption(option)}2. 点击获取下一层地图数据const getAreaCounty = (name) => { // 我从后盾获取json数据的接口函数 apiAreaCounty({ parent: name }).then((res) => { // 获取绘制容器 mychart = echarts.init(chart.value) // 绘制地图 initEcharts(res, name, mychart) mychart.on('click', (params) => { // 点击下钻的操作写在这里 // 从params中拿取每一层数据所须要的参数或判断条件等或者从全局变量/函数传参中读取 apiAreaCounty({ parent: params.name }).then((res) => { initEcharts(res, params.name, mychart) }) }) })}3. 记录每一步地图所处层级这一步是多层下钻返回的要害，将每次点击的发动不同申请的参数保留到数组中，每一步返回，读取保留的最初一组参数发动新的申请，同时将数组中的这组数据移除 ...

关于echarts:echarts相关问题

1、legend 每个label长度不一样须要对齐时，自定义每一项的款式 this.legendData = [ { data: [dataList[0].name], left: '20px', formatter: function (name) { return '{a|' + name + '}' }, textStyle: { color: '#78A0C2', backgroundColor: "transparent", rich: { a: { width:260 } } }, icon: 'rect', // 形态 itemWidth: 6, // 宽 itemHeight: 6 // 高 }, { data: [dataList[2].name], textStyle: { color: '#78A0C2', backgroundColor: "transparent", width:240 }, left: '310px', icon: 'rect', itemWidth: 6, itemHeight: 6 }, { data: [dataList[1].name], left: '20px', top: '20px', textStyle: { color: '#78A0C2' }, icon: 'rect', itemWidth: 6, itemHeight: 6 }, { data: [dataList[3].name], left: '310px', top: '20px', textStyle: { color: '#78A0C2' }, icon: 'rect', itemWidth: 6, itemHeight: 6 } ]2、 x轴lable搁置不下旋转、强制显示不距离 ...

关于echarts:echarts给柱状图的每个柱子配置不同的颜色

在series数组对象中与data和type同级的写一个itemStyle的对象，对象中是normal对象，normal对象中有一个color键，其值是对应的是一个函数，其中this.pieColor是我本人定义的色彩数组，相似于： [ "#FFDB5C", "#37A2DA", "#fb7293", "#67E0E3"]而后函数的参数params中有一个dataIndex属性，将其返回即可应用，如下边代码所示： series: [ { type: "bar", data: dataX, itemStyle: { normal: { color: (params) => this.pieColor[params.dataIndex], }, }, },],

关于echarts:ECharts图表如何响应容器大小变化

默认状况下，当扭转容器尺寸时（比方更改分辨率，浏览器页面缩放），图表原先是多大还是多大，不会依据容器尺寸的变动而扭转，然而咱们都心愿：生成的图表可能依据容器的大小，做出对应的变动，这如何实现呢？官网给出的计划是监听window对象的resize()事件，做出对应的更改。然而看了鑫神的这篇文章《检测DOM尺寸变动JS API ResizeObserver简介》，文中蕴含以下一些观点： window对象的resize()事件只能监测窗体尺寸的变动。有时候窗体的尺寸没变，然而DOM元素尺寸变动了，那resize()事件是监测不到的。有时候窗体的尺寸变了，可DOM元素的尺寸没变，那用resize()事件做监测就有些节约了。因为上述这些弊病，咱们须要一个真正能监测DOM元素尺寸变动的工具，这就是ResizeObserver对象。这就提供了一个新的思路，感觉很高级，现实际如下。 <template> <div id="myChart" /></template><script>import * as echarts from 'echarts'export default { name: 'Charts', data () { return { myChart: null, timer: null } }, methods: { // 监测容器尺寸扭转 observeResize () { const or = new ResizeObserver(entries => { clearTimeout(this.timer) this.timer = setTimeout(() => { this.myChart && this.myChart.resize() }, 100) }) or.observe(document.getElementById('myChart')) }, showChart () { this.myChart = echarts.init(document.getElementById('myChart')) const options = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [ { name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] } this.myChart.setOption(options) } }, mounted () { this.showChart() this.observeResize() }}</script><style> #myChart { height: 300px; border: 1px solid blue; }</style>

关于echarts:echart的环形图表中legend配置项中存在多个重复数据页面展示的时候合并为一个数据展示问题

我的项目场景：echart的环形图表中legend配置项中存在多个反复数据，页面展现的时候合并为一个数据展现了例如：多个同名业务类型，然而key值不同，须要将所有业务类型都展现。问题形容开发中遇到业务类型名称不惟一状况，存在多个业务类型同名然而key值不同，此处多个业务类型应该通过不同色彩将所有类型名都展现，然而理论展现是同名业务类型合并为同一名称，并且色彩雷同。例如：图表初始化数据代码： drawChannelChart() { // 基于筹备好的dom，初始化echarts实例 this.channelChart = echarts.init(document.getElementById("channelChart")); // 绘制图表 this.channelChart.setOption({ title: { text: "总数", //副标题 subtext: this.channelTotal || "0", // 主副标题间距 itemGap: 15, x: "center", y: "center", // x:'17%', // y:'12%', top: "170", //主题目款式 textStyle: { fontSize: "18", color: "#CCCCCC" }, //副标题款式 subtextStyle: { fontSize: "35", fontWeight: "800", color: "#555" } }, tooltip: { trigger: "item" }, legend: { top: "95%", left: "center", // left: '10%', icon: "circle", }, series: [ { name: "", type: "pie", radius: ["40%", "70%"], avoidLabelOverlap: false, label: { show: false, position: "center" }, emphasis: { label: { show: false, fontSize: "40", fontWeight: "bold" } }, labelLine: { show: false }, data: [ { "key": "1", "name": "超高清", "value": 3 }, { "key": "2", "name": "低时延", "value": 1 }, { "key": "3", "name": "低时延", "value": 2 }, ] } ] }); },起因剖析：需要要求，之前没有留神到这方面的问题。解决方案：通过legend和tooltip属性的formatter属性值来批改对雷同name值数据的展现问题。首先在获取到数据的时候，对数据进行解决channelTypes.forEach((element, i) => { let obj = {}; obj.value = element.num || 0; obj.name = element.value+ element.key;//应用原来的name值+key值作为name惟一的标识 obj.text = element.value;//预计的展现名称 obj.key = element.key; this.channelData.push(obj); });其次初始化图表设置drawChannelChart() { // 基于筹备好的dom，初始化echarts实例 this.channelChart = echarts.init(document.getElementById("channelChart")); // 绘制图表 this.channelChart.setOption({ title: { text: "总数", //副标题 subtext: this.channelTotal || "0", // 主副标题间距 itemGap: 15, x: "center", y: "center", // x:'17%', // y:'12%', top: "170", //主题目款式 textStyle: { fontSize: "18", color: "#CCCCCC" }, //副标题款式 subtextStyle: { fontSize: "35", fontWeight: "800", color: "#555" } }, tooltip: { trigger: "item", //此处是针对于批改后数据展现做批改，否则鼠标移上展现的数据是名称+key值 formatter:(params)=>{ let content = ``; let name = this.channelData.find((v) => v.name === params.name).text; content = `<div><span> ${name}</span>：<span>${params.value}</span></div>`; return content; } }, legend: { top: "95%", left: "center", // left: '10%', icon: "circle", show:true, //此处是针对于批改后数据展现做批改，否则鼠标移上展现的数据是名称+key值 formatter:(name)=>{ let showText = this.channelData.find((v)=>v.name===name).text; return showText; } }, series: [ { name: "", type: "pie", radius: ["40%", "70%"], avoidLabelOverlap: false, label: { show: false, position: "center" }, emphasis: { label: { show: false, fontSize: "40", fontWeight: "bold" } }, labelLine: { show: false }, data: [ { "key": "1", "name": "超高清1", "text":"超高清", "value": 3 }, { "key": "2", "name": "低时延2", "text": "低时延", "value": 1 }, { "key": "3", "name": "低时延3", "text": "低时延", "value": 2 }, ] } ] }); },重点批改局部 ...

关于echarts:echarts-移动端竖着显示

echarts在挪动端竖着显示（非竖屏切换）让用户看到更多的数据。最终成果：遇到的问题：一、toolTip（文字）与y轴平行显示看过官网文档后思路：1、extraCssText配置属性（未解决） extraCssText: 'transform:rotate(90deg) !important;transform-origin: center;',2、formtter（未解决） formatter() { return `<h1>6</h1>`},以上都不行，因为toolTip始终会动静计算地位并生成transform: translate3d(150px, 262px, 0px); 3、搞不定父元素，就搞定子元素（解决）解决父元素必须思考两个问题：地位、旋转。这是代码起码的解决方案。配置项： tooltip: { trigger: 'axis', className: 'tp-box', position([left, top], params, dom, rect, size) { return { left, top }; },},css： ::v-deep(.tp-box ) { background-color: transparent !important; border: none; box-shadow: none !important; padding: 0 !important; & > div { transform: rotate(90deg) !important; transform-origin: top left; z-index: 9999999; box-shadow: rgb(0 0 0 / 20%) 1px 2px 10px; background-color: rgb(255, 255, 255); border-width: 1px; border-radius: 4px; color: rgb(102, 102, 102); padding: 10px; } }

关于echarts:两种方案AMapEcharts绘制中国人口密度热力图地图

背景在做相似中国的人口密度“热力”图时，一开始用高德地图AMap，实现了省份区域按密度值展现色彩，解决了悬浮、点击的交互，如区域色彩批改、显示弹窗（InfoWindow）等，因为不心愿地图挪动，地图设置了dragEnable为false。发现2个问题：因为不心愿地图挪动，InfoWinodw的autoMove设置了false（即不会主动挪动地图，调整窗体到视线内），那么弹窗的地位得本人计算防止越出边界（通过判断边界设置anchor）；挪动端页面在地图区域无奈滚动（目前没找到什么办法解决的）。上述问题如果亲们有解决方案，能够戳戳留言哦，谢谢～基于上述2个较“麻烦”的问题，我转向看了一下echarts的地图。本文简略记录了一下2种计划的大抵思路。 AMap高德地图参考官网例子：繁难行政区图+标注，实现大抵思路： 1、通过AMap.DistrictLayer.Country绘制中国省份区域 const disCountry = new AMap.DistrictLayer.Country({ zIndex: 10, SOC: 'CHN', depth: 1, styles: { 'nation-stroke': '#ff0000', 'coastline-stroke': '#0088ff', 'province-stroke': 'grey', 'fill': function (props) { return getColorByDGP(props.adcode_pro, GDPSpeed) } }})var map = new AMap.Map("amap-container", { zooms: [2, 10], center: [106.122082, 33.719192], zoom: 3.5, isHotspot: false, defaultCursor: 'pointer', resizeEnable: false, dragEnable: false, zoomEnable: false, scrollWheel: false, touchZoom: false, layers: [ disCountry ]})2、通过 AMap.LabelMarker（AMap.LabelsLayer）增加省份文字；3、别离给地图map、省份文字labelMarker增加mousemove、click事件； map的悬浮事件处理样例 map.on('mousemove', function (ev) { var px = ev.pixel; // 拾取所在位置的行政区 var props = disCountry.getDistrictByContainerPos(px); if (props) { var adcode = props.adcode; if (adcode) { highlightDistrict(adcode); } } else { //悬浮在地图外空白处 updateDisCountryStyle(); } });省份文字的点击事件样例 labelsMarker.on('mousemove', function (e) { highlightDistrict(e.target._opts.extData.adcode); })高亮时省份区域色彩更新function highlightDistrict(adcode, color = 'rgb(253,244,155)') { // 重置行政区款式 disCountry.setStyles({ 'fill': function (props) { return props.adcode == adcode ? color : getColorByDGP(props.adcode_pro, GDPSpeed); } });}4、点击关上AMap.InfoWindow弹窗，设置autoMove为false，不然地图会挪动，只能通过anchor去管制弹窗的方向，再通过窗口大小和地位与容器边界去判断，调整理论显示的地位和anchor方向。Echarts地图先珍藏起这2个宝藏！1、阿里的数据可视化核心这里能够获取到国内省市区的GeoJson数据 ...

关于echarts:ECharts-X-轴标签过长导致文字重叠的-4-种解决方案

本文完整版：《ECharts X 轴标签过长导致文字重叠的 4 种解决方案》 Echarts 是国内图表组件占有率最高的第三方库，在应用中咱们常常遇到 X 轴标签文字过长导致显示不全或 X 轴标签刻度距离不够的问题。本文具体解说 4 种标签超长显示问题的解决方案，轻松解决所有场景下的超长问题。另外，这个世界曾经悄悄发生变化，当初基本无需写任何前端代码，间接应用卡拉云 —— 新一代低代码开发工具帮你搭建后盾工具，卡拉云可一键接入常见数据库及 API ，无需懂前端，内置欠缺的各类前端组件，无需调试，拖拽即用。原来三天的工作量，当初 1 小时搞定，谁用谁晓得，用上早上班，详见本文文末。咱们开始吧。办法一：Echarts X 轴标签歪斜摆放我集体比拟喜爱 45 度歪斜显示，兼顾好看的前提下解决 echarts X 轴标签文字过多导致的显示不全。 myChart.setOption({ title: { text: '卡拉云 - 销售团队状况汇总' }, tooltip: {}, xAxis: { data: [ '蒋铁柱团队', '谢国庆团队', '卡拉云小火箭', '木棉花团队', '橘子可乐团队', '太阳花团队', '蒸汽火车团队', '金元宝团队' ], name: '团队名', // X 坐标轴名称 nameLocation: 'end', // 名称显示在 X 坐标轴的地位 axisLabel: { // X 坐标轴标签相干设置 interval: 0, rotate: '45' } }, yAxis: {}, series: [ { name: '数量', type: 'bar', data: [67, 93, 45, 23, 77, 85, 55, 17] } ]});rotate 调整 X 轴标签歪斜角度，个别歪斜 45 度就能完满解决 X 轴标签超长显示问题interval 距离显示。0 为显示所有 X 轴标签，1 为空一个显示一个等扩大浏览：《12 款最棒 Vue 开源 UI 库测评 - 特地针对国内应用场景举荐》 ...

关于echarts:echarts-一个div中包含多个图表渲染bug

上周我的项目的首页中有四个仪表盘相似，从代码的复用性角度去思考，我决定在同一个div中应用flex布局将四个仪表盘渲染进去。然而呈现了一个令人头痛的问题，在第二次进入首页后，仪表盘的图表居然不渲染了，关上控制台后发现报了一个谬误，粗心是：以后echarts的实例已存在，不可反复申明。接着在网上找了很多解决形式：例如应用echarts的dispose办法去销毁实例，但依然杯水车薪。最初还是在echarts的官网文档中找到了解决办法* document.getElementById('以后图表id')?.setAttribute('_echarts_instance_', '以后图表id')官网文档yyds上面贴出官网文档中的解释：创立一个 ECharts 实例，返回 echartsInstance，不能在单个容器上初始化多个 ECharts 实例。具体起因见下方博客：https://blog.csdn.net/weixin_...

关于echarts:echarts微信小程序图表不跟随滑动问题

1，问题形容应用echarts时界面滑动时，图标不追随滑动，浮在元素上方。2，最简略的办法在ec-canvas中增加，force-use-old-canvas="true"，即可解决。

关于echarts:vue项目echarts按需引入

装置echarts包 npm install echarts --save全局引入--main.js // 引入echartsimport echarts from 'echarts' // 全局注入echartsVue.prototype.$echarts = echarts vue页面中应用办法this.$echarts.init(..)页面按需引入 // 引入echarts模块const echarts = require('echarts/lib/echarts')// 引入须要的图表类型，柱状图和雷达图require('echarts/lib/chart/bar')require('echarts/lib/chart/radar') // 引入提示框和title组件，图例require('echarts/lib/component/tooltip')require('echarts/lib/component/title')require('echarts/lib/component/legend')vue页面中应用办法echarts.init(..) 如果呈现图片中的报错信息的话，须要加上以下两句 import { GridComponent } from 'echarts/components'echarts.use(GridComponent)好啦，echarts按需引入就实现了，打包时会发现文件放大了很多。

关于echarts:echarts两个折线图共用x轴且合并tooltip功能代码

问题形容产品要这样的成果，就做这样的成果呗。有图有假相，咱们先来看一下效果图：效果图代码附上运行的话，间接赋值粘贴即可，遇到相似的性能，ctrl+CV改一下就行啦 ^_^ <template> <div class="eWrap"> <div id="echartsDom"></div> </div></template><script>import Echarts from "echarts";export default { data() { return { myChart: null, // 定义变量用来寄存echarts实例 xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], // 两个echarts专用的x轴的数据 y1Data: [8888, 9999, 7777, 10000, 3334, 7878, 6543], // 小件货物 y2Data: [56, 64, 32, 58, 64, 76, 81], // 网点负荷 y3Data: [88, 99, 77, 100, 21, 66, 95], // 大件货物 }; }, mounted() { this.drawEcharts(); }, methods: { // 画图办法 drawEcharts() { this.myChart = Echarts.init(document.getElementById("echartsDom")); this.myChart.setOption({ color: ["#bfa", "#baf", "pink", "#baf"], // 配置数据色彩 grid: [ // 配置第一个折线图的地位 { left: "14.5%", right: "12%", top: "10%", height: "32%", }, // 配置第二个折线图地位 { left: "14.5%", right: "12%", top: "60%", height: "32%", }, ], tooltip: { trigger: "axis", // formatter函数动静批改tooltip款式 formatter: function (params) { if (params) { var htmlStr = ""; htmlStr += params[0].name.replace(/\-/g, "/") + "<br/>"; //x轴的名称 for (var i = 0; i < params.length; i++) { var param = params[i]; // 存一份item项 var seriesName = param.seriesName; //图例名称 var value = param.value; //y轴值 var color = param.color; //图例色彩 htmlStr += "<div>"; htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>'; //圆点前面显示的文本 htmlStr += seriesName + "：" + value; switch (seriesName) { case "小件货物": htmlStr += " " + "件"; break; case "网点负荷": htmlStr += " " + "%"; break; case "大件货物": htmlStr += " " + "件"; break; default: htmlStr += " "; } htmlStr += "</div>"; } return htmlStr; } else { return; } }, backgroundColor: "#ccc", borderWidth: 1, borderColor: "#ccc", padding: 10, textStyle: { color: "#000", fontSize: 12, align: "left", }, }, legend: { show: true, x: "center", y: "0", data: ["小件货物", "网点负荷", "大件货物", "网点负荷"], textStyle: { fontSize: 12, }, }, // 将高低两个tootip合成一个 axisPointer: { link: { xAxisIndex: "all" }, }, xAxis: [ { type: "category", scale: true, axisLabel: { show: false, }, axisTick: { alignWithLabel: true, }, splitLine: { show: false, }, data: this.xData, //x轴工夫的数据 }, { gridIndex: 1, type: "category", scale: true, axisLabel: { fontSize: 10, }, axisTick: { alignWithLabel: true, }, splitLine: { show: false, }, data: this.xData, //x轴工夫的数据 }, ], yAxis: [ { type: "value", name: "件数", nameLocation: "center", nameGap: 50, nameTextStyle: { fontSize: 12, fontWeight: "500", }, axisLabel: { fontSize: 12, }, min: function (value) { return parseInt(value.min); }, max: function (value) { return parseInt(value.max * 1.05); }, scale: false, boundaryGap: [0, "100%"], splitLine: { show: false, }, splitNumber: 4, //设置坐标轴的宰割段数 }, { type: "value", name: "负荷/百分比", nameLocation: "center", nameGap: 42, nameTextStyle: { fontSize: 12, }, axisLabel: { fontSize: 12, }, // min: function (value) { // return parseInt(value.min); // }, // max: function (value) { // return parseInt(value.max * 1.05); // }, scale: true, boundaryGap: [0, "100%"], splitLine: { show: false, }, splitNumber: 4, //设置坐标轴的宰割段数 }, { type: "value", name: "件数", nameLocation: "center", gridIndex: 1, nameGap: 30, nameTextStyle: { fontSize: 12, }, axisLabel: { fontSize: 12, }, min: function (value) { return parseInt(value.min); }, max: function (value) { return parseInt(value.max * 1.05); }, scale: true, boundaryGap: [0, "100%"], splitLine: { show: false, }, splitNumber: 4, //设置坐标轴的宰割段数 }, { type: "value", name: "负荷/百分比", nameLocation: "center", gridIndex: 1, nameGap: 42, nameTextStyle: { fontSize: 12, }, axisLabel: { fontSize: 12, }, // min: function (value) { // return parseInt(value.min); // }, // max: function (value) { // return parseInt(value.max * 1.05); // }, scale: true, boundaryGap: [0, "100%"], splitLine: { show: false, }, splitNumber: 4, //设置坐标轴的宰割段数 }, ], dataZoom: [ { type: "inside", startValue: this.y1Data.length - 4, // 搁置最初4个数组 endValue: this.y1Data.length - 1, xAxisIndex: [0, 1], // 显示 0 1 的数据，这个要加，不加的话，悬浮提醒就会出问题 }, ], series: [ { name: "小件货物", type: "line", xAxisIndex: 0, yAxisIndex: 0, hoverAnimation: true, // 悬浮的动画加上 data: this.y1Data, //小件货物 }, { name: "网点负荷", type: "line", xAxisIndex: 0, yAxisIndex: 1, hoverAnimation: true, // 悬浮的动画加上 data: this.y2Data, //网点负荷 }, { name: "大件货物", type: "line", xAxisIndex: 1, yAxisIndex: 2, hoverAnimation: true, // 悬浮的动画加上 data: this.y3Data, //大件货物 }, { name: "网点负荷", type: "line", xAxisIndex: 1, yAxisIndex: 3, hoverAnimation: true, // 悬浮的动画加上 data: this.y2Data, //网点负荷 }, ], }); // 自适应 window.addEventListener("resize", () => { this.myChart.resize(); }); }, },};</script><style lang="less" scoped>.eWrap { width: 100%; height: 400px; overflow: hidden; #echartsDom { width: 100%; height: 100%; }}</style>

关于echarts:HTMLecharts改变折线图的线条颜色和区域颜色

HTML+echart的状况下，扭转所用折线图的线条色彩。在做的过程中，一下子想不起了怎么给echart的折线图线条批改色彩，而后去查阅材料发现能够通过上面增加相应代码，便可胜利批改。折线图的线条色彩在lineStyle里，在item是指每个数据点上的图标，默认是个小圆点，上面代码曾经pose进去了,依据本人的需要来批改。 // 指定图表的配置项和数据 option6 = { title: { text: '月度维修费趋势图' }, tooltip: {}, legend: { data:['设施原值'] }, xAxis: { type: 'category', data: ['2020-10', '2020-11', '2020-12', '2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07', '2022-03'] }, yAxis: { type: 'value' }, series: [ { name:'设施原值', data: [70, 73, 74, 78, 72, 77, 76,70, 73, 74, 78], type: 'line', areaStyle: { normal: { color: '#daeafe' //扭转区域色彩 } }, itemStyle: { normal: { color: '#8ec8fe' } }, } ]

关于echarts:echarts折线图配置虚线

echarts折线图配置虚线1.开发环境 vue+echarts2.电脑系统 windows10专业版3.在开发的过程中,咱们常常会应用到echarts绘制,当初我来分享一下,应用折线图怎么配置虚线?成果如下:4.配置代码如下: yAxis: { type: "value", min: a.echartsObj.echartsZhuMin, max: a.echartsObj.echartsZhuMax, interval: (a.echartsObj.echartsZhuMin + a.echartsObj.echartsZhuMax) / 2, splitLine: { //网格线 lineStyle: { type: "dashed", //设置网格线类型 dotted：虚线 solid:实线 width: 4, }, show: true, //暗藏或显示 }, },5.配置整体代码如下: this.Chenoptionzhe = { title: { text: "ECharts 入门示例2", }, tooltip: { trigger: "axis", }, xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", ""], show: false, }, yAxis: { type: "value", min: a.echartsObj.echartsZhuMin, max: a.echartsObj.echartsZhuMax, interval: (a.echartsObj.echartsZhuMin + a.echartsObj.echartsZhuMax) / 2, splitLine: { //网格线 lineStyle: { type: "dashed", //设置网格线类型 dotted：虚线 solid:实线 width: 4, //color:"red" }, show: true, //暗藏或显示 }, }, series: [ { // data: [820, 932, 901, 934, 1290, 1330, 1320], data: a.echartsObj.echartsZhuArr, type: "line", }, ], };6.本期的教程到了这里就完结啦,是不是很nice,心愿你对有所帮忙,让咱们一起致力走向巅峰! ...

关于echarts:echarts配置折线图的点和线条的颜色

echarts配置折线图的点和线条的色彩1.开发环境 vue+echarts2.电脑系统 windows10专业版3.在应用vue+echarts开发的过程中,咱们会常常应用折线图,可能依据需要咱们须要应用配置折线图的点和色彩,上面是我总结的办法,心愿对你有所帮忙!4.效果图入如下:5配置代码如下: series: [ { showSymbol: true, symbol: 'circle', //设定为实心点 symbolSize: 20, //设定实心点的大小 color:"#000", //设定实线点的色彩 lineStyle: { normal: { width: 2, color:"#0000ff", //设置实线的色彩 }, }, name: '邮件营销', type: 'line', stack: '总量', data: [120, 132, 101, 134, 90, 230, 210] }, { showSymbol: true, symbol: 'circle', //设定为实心点 symbolSize: 20, //设定实心点的大小 color:"#000", //设定实线点的色彩 name: '联盟广告', type: 'line', stack: '总量', data: [220, 182, 191, 234, 290, 330, 310] }, { showSymbol: true, symbol: 'circle', //设定为实心点 symbolSize: 20, //设定实心点的大小 color:"#000", name: '视频广告', type: 'line', stack: '总量', data: [150, 232, 201, 154, 190, 330, 410] }, ]6.本期的教程到了这里就完结啦,是不是很nice,心愿对你有帮忙,让咱们一起致力走向巅峰! ...

关于echarts:echarts折线图两组数据使用两个y轴代码

记录一下成果以及相干代码，留作当前复用效果图代码<template> <div class="zhexianWrap"> <div id="echartsBox"></div> </div></template><script>import Echarts from "echarts";export default { data() { return { myChart: null, // 定义变量用来寄存echarts实例 minData: 1, maxData: 10, }; }, mounted() { this.drawEcharts(); }, methods: { // 画图办法 drawEcharts() { this.myChart = Echarts.init(document.getElementById("echartsBox")); this.myChart.setOption({ tooltip: { trigger: "axis", confine: true, // 解决悬浮提醒被遮住的问题 formatter: function (params) { var res = "<div style='padding:0 12px;height:24px;line-height:24px;'><p>" + params[0].name + " </p></div>"; for (var i = 0; i < params.length; i++) { //因为是个数组，所以要遍历拿到外面的数据，并退出到tooltip的数据内容局部外面去 res += `<div style="padding:0 12px;"> <span style="display:inline-block;margin-right:4px;border-radius:2px;width:10px;height:10px;background-color:${[ params[i].color, // 默认是小圆点，咱们将其批改成有圆角的正方形，这里用的是模板字符串。并拿到对应色彩、名字、数据 ]};"></span> ${params[i].seriesName} ${params[i].data} ${i == 0 ? "km" : "min"} </div>`; } return res; // 通过这么一加工，最终返回进来并渲染，最终就呈现了咱们所看的成果 }, }, xAxis: { type: "category", data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], axisLabel: { // 设置x轴下方文字的款式 textStyle: { show: true, color: "#BDBDBD", fontSize: "12", }, }, axisLine: { show: true, lineStyle: { // 设置x轴线条的款式 color: "#BDBDBD", width: 1, type: "solid", }, }, }, yAxis: [ { type: "value", splitNumber: 4, //设置坐标轴的宰割段数 splitLine: { //去除网格线 show: false, }, axisLine: { //y轴线的色彩以及宽度 show: true, lineStyle: { color: "#BDBDBD", width: 1, type: "solid", }, }, axisLabel: { // 设置y轴的文字的款式 textStyle: { show: true, color: "#BDBDBD", fontSize: "12", }, }, }, { type: "value", splitLine: { //去除网格线 show: false, }, axisLine: { //y轴线的色彩以及宽度 show: true, lineStyle: { color: "#BDBDBD", width: 1, type: "solid", }, }, min: this.minData, // 最大值和最小值要从后端获取，或者写死数值，或者不去自定义最大最小值 max: this.maxData, splitNumber: 6, //设置坐标轴的宰割段数 axisLabel: { formatter: function (v) { return v.toFixed(1); //0示意保留小数为0位，1示意1位，2示意2位 }, }, }, ], legend: { data: ["跑步", "平板撑持"], }, series: [ { name: "跑步", yAxisIndex: 0, // 默认应用的是左侧的y轴左侧的y轴yAxisIndex值为0 data: [8.5, 7.2, 10, 9.5, 4, 6.6, 10], type: "line", }, { name: "平板撑持", yAxisIndex: 1, // 指定应用右侧的y轴，也就是yAxisIndex为1即可 data: [3.5, 4, 2.5, 5, 9.4, 1, 5], type: "line", }, ], grid: { // 地位 show: true, x: 48, y: 24, x2: 48, y2: 26, // 6 borderWidth: 0, // 去除图表的边框 }, title: [ // 因为是两个y轴，所以title写成数组的模式，进行配置 { // title为题目局部，有一级题目text，二级题目subtext。这里咱们应用二级题目，再批改一下这个二级题目的地位即可呈现咱们想要的成果了，当然款式也能够通过title.subtextStyle去配置 subtext: "公里数（km）", left: 48, // 间隔右边地位 top: 0, // 间隔下面地位 subtextStyle: { // 设置二级题目的款式 color: "#BFBFBF", }, }, { // title为题目局部，有一级题目text，二级题目subtext。这里咱们应用二级题目，再批改一下这个二级题目的地位即可呈现咱们想要的成果了，当然款式也能够通过title.subtextStyle去配置 subtext: "分钟（min）", right: 48, // 间隔右边地位 top: -8, // 间隔下面地位 subtextStyle: { // 设置二级题目的款式 color: "#BFBFBF", }, }, ], color: ["#ED837C", "#E8D095"], // 管制折线图的色彩 }); // 自适应 window.addEventListener("resize", () => { this.myChart.resize(); }); }, },};</script><style lang="less" scoped>.zhexianWrap { width: 100%; height: 300px; overflow: hidden; // 解决鼠标移除echarts图当前呈现滚动条问题 #echartsBox { width: 100%; height: 100%; }}</style>

关于echarts:Echarts实现34环形图

3/4环形图实现通过循环数据，把每一条数据放入一个环形图内，每一个环形图分为3块空间：理论数据占据的空间这里占据的空间须要转换成3/4比例：value * 0.75 虚构的3/4环形图剩下的数据这里是占据3/4空间内除了理论数据之后残余空间：(总数据-value) * 0.75 1/4须要做成通明的数据始终占据1/4空间：总数 * 0.25,色彩设置为transparent通明色利用y轴上浮现旁边的正文。留神x轴也必须写! xAxis: [{ show: false }],yAxis: [ { type: "category", inverse: true, axisLine: { show: false, }, axisTick: { show: false, }, axisLabel: { }, data: lineYAxis, },],效果图长处：通过这一系列计算保障了环形图数据量过大时不会溢出毛病：环形图数据项不能过多，因为内圈最小就是0%。在缩放的时候放大根本没问题，放大的时候会呈现数据正文对应不上的问题。因为这里是grid定位，y轴label来显示数据，思考给grid设置一个高度，然而这个高度应该随着环形图的半径来变动，而环形缩放的时候resize办法是依照盒子给定的最小宽或高来设置大小，用来放弃为一个圆。所以不晓得怎么取这个高度能力为最小...心愿读者能解决这个问题，并评论补充！js实现代码：export default { data() { return { ectOpts: {}, error: "", loading: false, latest: true, data: [], }; }, computed: { total() { let total = this.data.reduce((item1, item2) => { return (typeof item1 === "number" ? item1 : item1.num) + item2.num; }); return total; }, }, created() { this.getData(); }, mounted() { this.initEchart(); }, methods: { getData() { this.data = [ { name: "钱包领取", num: 13210 }, { name: "现金支付", num: 42111 }, { name: "记账领取", num: 81711 }, { name: "挪动领取", num: 121700 }, ]; this.data.forEach((item) => { item.percent = ((item.num / this.total) * 100).toFixed(1); }); }, initEchart() { let color = [ "rgba(255, 135, 0, 1)", "rgba(255, 195, 0, 1)", "rgba(0, 228, 115, 1)", "rgba(0, 157, 255, 1)", ].reverse(); let pieSeries = []; let lineYAxis = []; this.data.forEach((item, index) => { let iname = item.name; let inum = item.num; pieSeries.push({ name: iname, type: "pie", radius: [65 - 15 * index + "%", 57 - 15 * index + "%"], // 敞开悬停动画 hoverAnimation: false, // 是否顺时针旋转 clockwise: false, center: ["35%", "50%"], label: { show: false, }, data: [ { // 只设置3/4的值，以用于3/4环形图 value: inum * 0.75, name: iname, tooltip: { formatter: (item) => { return `<div style="display:flex;font-size:12px;"> <div style="color:${item.color};margin-right:10px;">●</div> <div> <div>${item.seriesName}：${item.value} 辆</div> <div>占比：${(item.percent / 0.75).toFixed(1) + "%"}</div> </div> </div> ` }, } }, { // 这里的值+下面的值为总和，然而只占比75% value: (this.total - inum) * 0.75, itemStyle: { color: "rgba(0, 132, 251, 0.2)", }, tooltip: { show: false } }, { // 弃用25%的环形图不做显示 value: this.total * 0.25, itemStyle: { color: "rgba(0,0,0,0)", }, tooltip: { show: false } }, ], }); lineYAxis.push({ value: index, textStyle: { rich: { circle: { color: color[index], padding: [0, 5], }, }, }, }); }); this.ectOpts = { tooltip: { trigger: "item", }, color, grid: { top: "15%", bottom: "54%", left: "35%", containLabel: false, }, // 有yAxis必须有xAxis xAxis: [{ show: false }], yAxis: [ { type: "category", // 反向坐标轴 inverse: true, axisLine: { show: false, }, axisTick: { show: false, }, axisLabel: { formatter: (params) => { let item = this.data[params]; return `{line|----------}{circle|●}{name|${item.name}：}{value|${item.num}辆，}{percent|占${item.percent}%}`; }, interval: 0, inside: true, rich: { line: { // width: 50, // height: 1, color: "rgba(236, 236, 236, 1)", // 以后echart版本不反对borderType用------代替 // borderType: "dashed", // borderColor: "#D9DFEB", // borderWidth: 1, }, }, textStyle: { color: "#fff", fontSize: 12, }, show: true, }, data: lineYAxis, }, ], series: pieSeries, }; }, },};

关于echarts:Echarts散点图小案例方便以后复用

记录一下，不便后续复用（复制粘贴） ^_^效果图代码如下演示的话，间接复制粘贴即可 <template> <div class="sandianWrap"> <div id="echart"></div> </div></template><script>import Echarts from "echarts";export default { data() { return { myChart: null, // 定义变量用来寄存echarts实例 sandianData: { // 散点图数据 one: [ [10.0, 8.04], [8.07, 6.95], [13.0, 7.58], [19, 12.3], [9.6, 7.7], [11.8, 19.65], ], two: [ [12, 12], [9, 16], [20, 18], [11, 13], [25, 21], [3.9, 17], ], three: [ [10, 12], [9, 12], [2, 11], [13, 22], [23, 33], [2, 11], ], four: [ [8, 9], [7, 13], [5, 12], [55, 32], [5.9, 14], [13, 45], ], five: [ [18, 19], [17, 23], [15, 21], [38, 99], [15, 63], [17, 24], ], }, }; }, mounted() { this.drawEcharts(); }, methods: { // 画图办法 drawEcharts() { this.myChart = Echarts.init(document.getElementById("echart")); this.myChart.setOption({ xAxis: { type: "value", name: "参数/单位", // x轴的名字，能够了解成单位 nameTextStyle: { // x轴的名字的款式相干 color: "#BFBFBF", nameLocation: "start", }, splitLine: { //去除网格线 show: false, }, splitArea: { show: false }, //去除网格区域，否则会有一片区域 axisLabel: { // 设置x轴的文字的款式 textStyle: { show: true, color: "#BDBDBD", fontSize: "12", }, }, axisLine: { show: true, // 把x轴从实线变成虚线 lineStyle: { // 设置x轴线条款式的色彩 color: "#BDBDBD", width: 1, type: "solid", }, }, scale: true, // 设置数据主动缩放，要不然数据多的话就堆一块了 }, yAxis: { type: "value", // name: "y轴的单位（人数）", nameTextStyle: { color: "#BFBFBF", nameLocation: "end", }, axisTick: { show: false, // 去掉y轴的凸出刻度 }, axisLine: { show: false, // 把y轴从实线变成虚线 }, splitLine: { //去除网格线 show: true, lineStyle: { type: "dashed", //设置网格线类型 dotted：虚线 solid:实线 }, }, splitArea: { show: false }, //去除网格区域 axisLabel: { // 设置y轴的文字的款式 textStyle: { show: true, color: "#BDBDBD", fontSize: "12", }, }, scale: true, // 设置数据主动缩放，要不然数据就堆一块了 // show: false, }, grid: { // 地位 show: true, x: 36, y: 40, x2: 72, y2: 36, borderWidth: 0, // 去除图表的边框 }, tooltip: { formatter: function (obj) { let value = obj.value; return ( '<div style="border-bottom: 1px solid #baf; font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' + obj.seriesName + "</div>" + "<span style='display:inline-block;width:8px;height:8px;line-height:8px;border-radius:50%;background:#000;margin-right:6px;'></span>" + "男生数量" + "：" + Number(value[0]).toFixed(2) + "个" + "<br>" + "<span style='display:inline-block;width:8px;height:8px;line-height:8px;border-radius:50%;background:pink;margin-right:6px;'></span>" + "女生数量" + "：" + Number(value[1]).toFixed(2) + "位" + "<br>" ); }, }, series: [ { name: "一班", symbolSize: 10, // 散点图的大小 data: this.sandianData.one, type: "scatter", // 类型为散点图 itemStyle: { // 设置散点图的透明度 opacity: 0.85, }, }, { name: "二班", symbolSize: 10, data: this.sandianData.two, type: "scatter", itemStyle: { opacity: 0.85, }, }, { name: "三班", symbolSize: 10, data: this.sandianData.three, type: "scatter", itemStyle: { opacity: 0.85, }, }, { name: "四班", symbolSize: 10, data: this.sandianData.four, type: "scatter", itemStyle: { opacity: 0.85, }, }, { name: "五班", symbolSize: 10, data: this.sandianData.five, type: "scatter", itemStyle: { opacity: 0.85, }, }, ], title: { // title为题目局部，有一级题目text，二级题目subtext。这里咱们应用二级题目，再批改一下这个二级题目的地位即可呈现咱们想要的成果了，当然款式也能够通过title.subtextStyle去配置 subtext: "y轴的单位（人数）", left: 0, // 间隔右边地位 top: -8, // 间隔下面地位 subtextStyle: { // 设置二级题目的款式 color: "#BFBFBF", }, }, color: ["#4CD3D4", "#60BD65", "#46A7EA", "#E99E44", "#DC403F"], // 管制圆环图的色彩 legend: { right: 10, itemGap: 20, itemWidth: 8, itemHeight: 8, data: ["一班", "二班", "三班", "四班", "五班"], textStyle: { fontSize: 12, }, }, }); // 自适应 window.addEventListener("resize", () => { this.myChart.resize(); }); }, },};</script><style lang="less" scoped>.sandianWrap { width: 100%; height: 100%; #echart { width: 100%; height: 400px; }}</style>

关于echarts:Echarts-学习

版本留神Echarts的版本，新旧版本有些语法不同，例： series:[ type:'bar', itemStyle:{ barBorderRadius: 5 }]旧版本外面边框圆角设置用barBorderRadius，而新版本应用borderRadius设置。 options各项配置title题目组件：顾名思义就是设置题目相干属性 legend图例组件：展示不同系列的标记，个别通过标记过滤数据 grid直角坐标系内绘图网格，个别用于设置坐标系地位 xAxis直角坐标系 grid 中的 x 轴， xAxis. intervalnumber强制设置坐标轴宰割距离。xAxis. silentboolean坐标轴是否是动态无奈交互。xAxis. gridIndexnumberx 轴所在的 grid 的索引，默认位于第一个 grid。多个x轴时须要指定 yAxisyAxis直角坐标系 grid 中的 y 轴，根本同上。留神xAxis,yAxis密不可分，即x轴，y轴要么都写，要么都不写。若只须要显示一个则指定另一个show为false。 3/4环形图实现<script>export default {data () { return { ectOpts: {}, data: [], };},computed: { total () { let total = this.data.reduce((item1, item2) => { return (typeof item1 === "number" ? item1 : item1.num) + item2.num; }); return total; },},created () { this.getData();},mounted () { this.initEchart();},methods: { getData () { this.data = [ { name: "钱包领取", num: 13210 }, { name: "现金支付", num: 42111 }, { name: "记账领取", num: 81711 }, { name: "挪动领取", num: 121700 }, ]; this.data.forEach((item) => { item.percent = ((item.num / this.total) * 100).toFixed(1); }); }, initEchart () { let color = [ "rgba(255, 135, 0, 1)", "rgba(255, 195, 0, 1)", "rgba(0, 228, 115, 1)", "rgba(0, 157, 255, 1)", ].reverse(); let pieSeries = []; let lineYAxis = []; this.data.forEach((item, index) => { let iname = item.name; let inum = item.num; pieSeries.push({ name: iname, type: "pie", radius: [65 - 15 * index + "%", 57 - 15 * index + "%"], // 敞开悬停动画 hoverAnimation: false, // 是否逆时针旋转 clockwise: false, center: ["30%", "50%"], label: { show: false, }, data: [ { // 只设置3/4的值，以用于3/4环形图 value: inum * 0.75, name: iname, }, { // 这里的值+下面的值为总和，然而只占比75% value: (this.total - inum) * 0.75, itemStyle: { color: "rgba(0, 132, 251, 0.2)", }, }, { // 弃用25%的环形图不做显示 value: this.total * 0.25, itemStyle: { color: "rgba(0,0,0,0)", }, }, ], }); lineYAxis.push({ value: index, textStyle: { rich: { circle: { color: color[index], padding: [0, 5], }, }, }, }); }); this.ectOpts = { tooltip: { trigger: "item", // formatter: '{a} <br/>{b}: {c} ({d}%)', formatter: (item) => { return (item.percent / 0.75).toFixed(1) + "%"; }, }, color, grid: { top: "15%", bottom: "54%", left: "30%", containLabel: false, }, // 有yAxis必须有xAxis xAxis: [{ show: false }], yAxis: [ { type: "category", inverse: true, axisLine: { show: false, }, axisTick: { show: false, }, axisLabel: { formatter: (params) => { let item = this.data[params]; return `{line|··················}{circle|●}{name|${item.name}：}{value|${item.num}辆，}{percent|占${item.percent}%}`; }, interval: 0, inside: true, rich: { line: { width: 50, height: 1, color: "rgba(236, 236, 236, 1)", // borderType: "dashed", // borderColor: "#D9DFEB", // borderWidth: 1, }, bd: { padding: [0, 5], }, value: { // fontSize: 15, // fontWeight: 500, }, }, textStyle: { color: "#fff", fontSize: 14, }, show: true, }, data: lineYAxis, }, ], series: pieSeries, }; },},};</script>

关于echarts:我是如何控制1000-个-Echarts-实例同时渲染-最大并发的

Demo 地址先上 demo 地址 https://codepen.io/firstblood... 我的项目背景随着面向领导编程越来越深入人心, 看板我的项目想必是每个前端开发专家的必修之路产品经理张三要求前端开发专家红盾做一个由 1000个图表定时刷新的公司最新的财务收入状况红盾在 chrome 上一顿操作猛如虎,没两三天就把我的项目搞定了交付给产品经理张三. 无并发管制让咱们来看看红盾此时大抵的代码状况 <template> <div class="app-container"> <div class="charts"> <div v-for="item in domList" :id="item" :key="item" class="chart" /> </div> </div></template><script>const echarts = require("echarts");const chartNum = 1000; // 图表数量const chartIntervalTime = 2000; // 图表定时渲染毫秒数export default { data() { return { domList: [], chartObjs: {}, chartData: [150, 230, 224, 218, 135, 147, 260], }; }, mounted() { // 创立echart并绘图 this.createChart(); // 隔3秒更新图表数据并渲染 this.intervalChartData(chartIntervalTime); }, methods: { // 创立echart并绘图 async createChart() { for (let i = 1; i <= chartNum; i++) { this.domList.push("chart" + i); } this.$nextTick(this.renderChartList); }, async renderChartList() { this.domList.forEach((dom) => this.initChart(dom)); }, // 隔3秒更新图表数据并渲染 intervalChartData(s) { setInterval(() => { this.renderChartList(); }, s); }, // 初始化图表 initChart(domId) { if (!this.chartObjs[domId]) { this.chartObjs[domId] = echarts.init(document.getElementById(domId)); } const option = { xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], }, yAxis: { type: "value", }, series: [ { data: this.chartData, type: "line", }, ], }; this.chartObjs[domId].clear(); this.chartObjs[domId].setOption(option); }, },};</script><style scoped>.chart { float: left; width: 360px; height: 300px; margin: 10px; border: 2px solid #ff9900;}</style>后果张三不按套路出牌, 在电视机上偷偷安了个浏览器(性能极差),而后输出地址 xxx.com (自行脑补)... ...

关于echarts:graph中使用markLine-能够随着graph图移动而一起移动

如上图所示，公司当初给了需要，须要在挪动garph（关系图）的时候，markLine做成的底图也要随之一起挪动。话不多说，间接开干首先须要明确的就是，在我接手的时候，底图是确定的，也就是这么个状态能够看到整体都曾经搭建起来了，也就是我并不需要能够看到markLine在关系图挪动的时候，并不会随之一起挪动

关于echarts:Echarts-雷达图指示器名称rich使用

'radar.name': { textStyle: { color: '#5a4b66'},formatter: (str) => { let obj = _.find(personalityChart, (pc: any) => pc.image === str) || {}; let percent = obj.percent ? `${Math.round(obj.percent * 100)}%` : '-'; return `{b|${percent}} {c|${str}}`;},rich: { b: { color: '#F78A89' }}},'**tooltip.formatter': (opts) => { let indicator = _.get(opts, 'radar.indicator');return (obj) => { let { name, value } = obj.data; let contentArr = indicator.map((key, inx) => `${key.name}: ${value[inx]}`); contentArr.unshift(obj.marker + name); return contentArr.join('<br />');};} ...

关于echarts:echarts-formatter参数

formatter外面的{a}{b}{c}{d}在什么时候应用？别离代表什么意思？其中变量a、b、c在不同图表类型下代表数据含意为：折线（区域）图、柱状（条形）图: a（系列名称），b（类目值），c（数值）, d（无）散点图（气泡）图 : a（系列名称），b（数据名称），c（数值数组）, d（无）饼图、雷达图 : a（系列名称），b（数据项名称），c（数值）, d（百分比）” 例如图：

关于echarts:将echarts生成的图表变为图片保存起来

一：echarts echarts官网：https://echarts.apache.org/zh... echarts.js地址：https://cdn.jsdelivr.net/npm/... 二：将echarts生成的图表变为图片示例 1：html <div style="width:800px;height:500px;" id="chart"></div>2:生成echarts图表(js)，这里以柱状图为例 var chart = echarts.init(document.getElementById("chart"));var option = { animation: false, title: { text: '统计', padding: [10, 320, 0, 320] }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], name: '月份', }, tooltip : { trigger: 'item', formatter: "{a} : {c}" }, yAxis: { type: 'value', name: '数量', }, series: [{ name: '数量', data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', barWidth : 50,//柱图宽度 label: { show: true, position: 'top' }, itemStyle: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#4976C5'}, {offset: 0.5, color: '#7496D3'}, {offset: 1, color: '#ECF0F9'}, ] ) }, } ]};chart.setOption(option);3：获取生成的柱状图的base64地址 ...

关于echarts:Echarts-柱状图渐变色

柱状图两种渐变色排列外围代码{ itemStyle: { normal: { color: function (params) { let colorArray = [ { top: 'rgba(34, 169, 255, 1)', // 蓝色 bottom: 'rgba(11, 31, 52, 1)' }, { top: 'rgba(216, 184, 89, 1)', // 黄色 bottom: 'rgba(6, 22, 42, 1)' } ] let num = colorArray.length return { type: 'linear', colorStops: [{ offset: 0, color: colorArray[params.dataIndex % num].bottom }, { offset: 1, color: colorArray[params.dataIndex % num].top }] } } } }}柱状图两种单色排列外围代码{ itemStyle: { normal: { color: function (params) { let colorArray = [ '#22A9FF', '#D8B859' ] if (params.dataIndex % 2 === 0) { return colorArray[0] } else { return colorArray[1] } } } }}

关于echarts:echarts-去除左侧空隙空白

ECharts默认状况下上下左右是有一些空白区域的，红色背景下图表没被撑满就会显得丑丑的相似这样：去除后是这样：难看了很多解决方案：通过 grid 属性来管制直角坐标系内绘图网格周围边框地位，具体有如下配置项：x：直角坐标系内绘图网格与左侧间隔，数值单位 px，反对百分比（字符串），如：50%x2：直角坐标系内绘图网格与右侧间隔，数值单位 px，反对百分比（字符串），如：50%y：直角坐标系内绘图网格与顶部间隔，数值单位 px，反对百分比（字符串），如：50%y2：直角坐标系内绘图网格与底部间隔，数值单位 px，反对百分比（字符串），如：50% 示例代码： <!DOCTYPE html><head> <meta charset="utf-8"> <title>hangge.com</title> <script src="echarts-all.js"></script> <script type="text/javascript"> window.onload = function() { // 基于筹备好的dom，初始化echarts图表 var myChart = echarts.init(document.getElementById('main')); //图表配置 var option = { backgroundColor:'#EFEFEF', tooltip : { trigger: 'axis' }, xAxis : [ { type : 'category', boundaryGap : false, data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value', axisLabel : { formatter: '{value} °C' } } ], series : [ { name:'最高气温', type:'line', data:[11, 11, 15, 13, 12, 13, 10] }, { name:'最低气温', type:'line', data:[1, -2, 2, 5, 3, 2, 0] } ], grid: { x: 50, y: 25, x2: 30, y2: 35 }, }; // 为echarts对象加载数据 myChart.setOption(option); //窗口缩放后从新调整图标尺寸 window.onresize = function (){ myChart.resize(); } } </script></head><style> #main { position: absolute; top: 15px; bottom: 15px; left: 15px; right: 15px; }</style><body>  <div id="main"></div></script></body>原文地址：https://www.hangge.com/blog/c... ...

关于echarts:echarts效果图和相关配置

饼状图扩大图例配置代码 export const YYSFL = function(data) { return { color: ['#1FD0A3', '#0FA7E9', '#FFC929', '#F2775A', '#EF5350'], tooltip: { trigger: 'item' }, title: { show: true, //显示策略，默认值true,可选为：true（显示） | false（暗藏） text: '55%', //主题目文本，'\n'指定换行 link: '', //主题目文本超链接,默认值true target: null, //指定窗口关上主题目超链接，反对'self' | 'blank'，不指定等同为'blank'（新窗口） subtext: '公开饮用水', //副标题文本，'\n'指定换行 sublink: '', //副标题文本超链接 subtarget: null, //指定窗口关上副标题超链接，反对'self' | 'blank'，不指定等同为'blank'（新窗口） x: 'center', //程度安放地位，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px） y: 'center', //垂直安放地位，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px） textAlign: null, //程度对齐形式，默认依据x设置主动调整，可选为： left' | 'right' | 'center backgroundColor: 'rgba(0,0,0,0)', //题目背景色彩，默认'rgba(0,0,0,0)'通明 borderColor: '#ccc', //题目边框色彩,默认'#ccc' borderWidth: 0, //题目边框线宽，单位px，默认为0（无边框） padding: 5, //题目内边距，单位px，默认各方向内边距为5，承受数组别离设定上右下右边距 itemGap: 10, //主副标题纵向距离，单位px，默认为10 textStyle: { //主题目文本款式{"fontSize": 18,"fontWeight": "bolder","color": "#333"} // fontFamily: 'Arial, Verdana, sans...', fontSize: 30, fontStyle: 'normal', fontWeight: 'bold', color: '#4A4A4A' } }, legend: { top: 55, // left: 'right', right: 10, icon: 'circle', itemWidth: 10, itemHeight: 7, //批改icon图形大小 bottom: 0, align: 'left', orient: 'vertical', textStyle:{ rich:(function(){ const colors = ['#1FD0A3', '#0FA7E9', '#FFC929', '#F2775A', '#EF5350'] return ["a","b","c","d","e"].reduce((temp,item,index)=>{ temp[item]={ color:colors[index] } return temp },{}) })() }, formatter: function(name) { const dt={ 'Ⅰ类':{ value:+data[0].value, prefix:"a" }, 'Ⅱ类':{ value:+data[1].value, prefix:"b" }, 'Ⅲ类':{ value:+data[2].value, prefix:"c" }, 'Ⅳ类':{ value:+data[3].value, prefix:"d" }, 'Ⅴ类':{ value:+data[3].value, prefix:"e" }, }; return name+"{"+dt[name].prefix+"| "+dt[name].value+"}" }, }, grid: { top: '20%', left: '1%', right: '15%', bottom: '5%', containLabel: true }, series: [ { name: 'xxx', type: 'pie', radius: ['60%', '80%'], avoidLabelOverlap: false, label: { show: false, position: 'outside', formatter: '{b}: {d}%', fontSize: 14 }, emphasis: { label: { show: false, fontSize: '40', fontWeight: 'bold' } }, labelLine: { show: true }, data: data } ] }}仪表盘定制 ...

关于echarts:记录Echarts-常用配置

//1.强制显示所有 x 轴数据axisLabel:{interval:0}//2.x轴过长换行axisLabel:{formatter:(value) => value.replace(/'-'/, "\n")}//3.图表提醒不能超过页面边界tooltip:{ position: function (point, params, dom, rect, size) { // 鼠标坐标和提示框地位的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下 // 提示框地位 var x = 0; // x坐标地位 var y = 0; // y坐标地位 // 以后鼠标地位 var pointX = point[0]; var pointY = point[1]; // 外层div大小 // var viewWidth = size.viewSize[0]; // var viewHeight = size.viewSize[1]; // 提示框大小 var boxWidth = size.contentSize[0]; var boxHeight = size.contentSize[1]; // boxWidth > pointX 阐明鼠标右边放不下提示框 if (boxWidth > pointX) { x = 20; // 本人定个x坐标值，以防出屏 y -= 15; // 避免点被覆盖住，可依据状况自行调节 } else { // 右边放的下 x = pointX - boxWidth - 15; } // boxHeight > pointY 阐明鼠标上边放不下提示框 if (boxHeight + 20 > pointY) { y = pointY + 15; } else if (boxHeight > pointY) { y = 5; } else { // 上边放得下 y += pointY - boxHeight; } return [x, y]; }}//4.x/y轴罕用配置xAxis:{ splitLine: {//4.分隔线 show: false, }, axisLine: {//坐标轴轴线 show: true, lineStyle: { color: "rgba(0,149,255,.8)", }, }, axisTick: {//刻度线 show: false, }, axisLabel: {//显示刻度标签文字 show: true, interval:0, rotate: 320,//x轴数据歪斜 textStyle: { color: "#b2b2b2", }, formatter: (value) => value.replace(/'-'/, "\n"), //X轴过长换行 },}

关于echarts:echarts的自适应问题窗口自适应侧边栏自适应eltab中的自适应

一、echart的图表提供了一个resize函数，当resize函数被触发时，图表会进行重绘。二、罕用的浏览器，窗口自适应。(1) 将搁置图表的容器div的宽设置为100%，不固定写死，height能够依据需要设置为vh或者px都行。 <div id="hh" style="width:100%;height:400px;"/>(2) 对浏览器窗口大小进行监听 window.addEventListener('resize',function(){ this.mychart.resize() //当浏览器窗口大小发生变化时，图表能够进行自适应})三、侧边栏收起或者关上导致的搁置图表的容器div利用vuex依据侧边栏的收起或者关上触发echart的resize办法 "$store.state.app.sidebar.opened"(){ setTimeout(()=>{ this.myChart.resize() },300)}四、el-tab切换时图表自适应宽度会变成100px压缩不自适应。起因是el-tab的时候，其余不显示的tab下的div此时的display为none，在点击tab切换时候，div还未渲染实现，图表在执行js初始化的时候找不到这个元素，所以主动将"100%"转成了"100"，最初计算出来的图表就成了100px。1、解决办法: <div id="hh" style="width:100%;height:400px;" v-if="activeName==='hh'"/>2、解决办法: <div id="hh" style="width:100%;height:400px;" :lazy='true'/>

关于echarts:vue-引入-echart

装置echarts依赖 npm install echarts --save在main.js中全局中援用import echarts from 'echarts'Vue.prototype.$echarts = echarts<div id="main" style="width:100%;height:376px"></div> mounted(){ this.getEchartData() }, methods: { getEchartData() { var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; option = { title: { text: '某站点用户拜访起源', subtext: '纯属虚构', left: 'center' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left', }, series: [ { name: '拜访起源', type: 'pie', radius: '50%', data: [ {value: 1048, name: '搜索引擎'}, {value: 735, name: '间接拜访'}, {value: 580, name: '邮件营销'}, {value: 484, name: '联盟广告'}, {value: 300, name: '视频广告'} ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; option && myChart.setOption(option); } },

关于echarts:echarts圆环图设置legend数据对齐百分比样式使用rich富文本标签和formatter函数

问题形容正当应用富文本标签会让echarts图做的成果更好看，本篇文章记录一下应用rich富文本标签和formatter函数去实现legend款式的优化批改，大抵蕴含： name名称出现value数值出现计算出的数据百分比款式对齐成果效果图将饼图数据和相应计算的百分比在legend中也展现，同时设置一下文字的款式，对齐形式，对齐形式是通过rich富文本设置每一项的宽度，就能够对齐了。当然要在formatter函数中拼接下来。代码如下先看legend --> textStyle --> rich的富文本设置而后看legend --> formatter的书写语法<template> <div> <div class="echartsBox" id="main"></div> </div></template><script>export default { data() { return { data: [ { value: 110, name: "语文问题" }, { value: 5, name: "数学" }, { value: 140.5, name: "英语问题" }, ], }; }, mounted() { // 在通过mounted调用让echarts渲染 this.echartsInit(); }, methods: { echartsInit() { let main = document.getElementById("main"); // 获取dom元素作为eacharts的容器 this.$echarts.init(main).setOption({ title: { zlevel: 2, // 管制圆环图两头的字的层级 text: "我是小明的成绩单", top: "47%", // 管制地位 left: "32%", // 管制地位 textAlign: "center", // 让文字居中 }, tooltip: { trigger: "item", // 触发机制，鼠标悬浮圆环项上 show: true, // 管制鼠标悬浮是否显示数据 }, legend: { orient: "vertical", // 管制程度排列 top: "36%", // 调整地位 right: "6%", // 间隔右侧地位 icon: "circle", // 批改小图标为圆形 itemHeight: 12, // 批改圆形小图标的大小 textStyle: { // 文字的款式 fontSize: 24, // 可管制每个legend项的间距 color: "#828282", rich: { // 通过富文本rich给每个项设置款式，上面的oneone、twotwo、threethree能够了解为"每一列"的款式 oneone: { // 设置文字、数学、英语这一列的款式 width: 50, color: "#000000", fontSize: 12, fontWeight: "bolder", }, twotwo: { // 设置10分、20分、30分这一列的款式 width: 35, color: "#333", fontSize: 12, }, threethree: { // 设置百分比这一列的款式 width: 20, color: "#E0E0E0", fontSize: 12, }, }, }, formatter: (name) => { // formatter格式化函数动静出现数据 console.log(name); var total = 0; // 用于计算总数 var target; // 遍历拿到数据 for (var i = 0; i < this.data.length; i++) { total += this.data[i].value; if (this.data[i].name == name) { target = this.data[i].value; } } var v = ((target / total) * 100).toFixed(2); return `{oneone|${name}} {twotwo|${target}分} {threethree|${v}%}`; // 富文本第一列款式利用富文本第二列款式利用富文本第三列款式利用 }, }, color: ["#baf", "#bfa", "#cde"], // 管制圆环图的色彩 series: [ { name: "成绩单", type: "pie", // 类型为饼图 radius: ["30%", "50%"], // 圆环分为内径和外径，就是两个半径不一样的饼图可组成一个圆环图，radius数组中的两项别离为内径和外径（绝对画布的百分比） center: ["32%", "50%"], // 调整圆环图地位 data: this.data, // 饼图的数据，个别是发申请获取的 avoidLabelOverlap: true, // 避免牵引线重叠挤在一块 label: { normal: { show: true, position: "outside", // 另有参数inside，能够让数据在圆环上 formatter: "{d}%", //模板变量有 {a}、{b}、{c}、{d}，别离示意系列名，数据名，数据值，百分比。{d}数据会依据value值计算百分比 textStyle: { // 牵引线上的文字的款式 align: "right", baseline: "middle", fontFamily: "微软雅黑", fontSize: 12, fontWeight: "bolder", color: "#333", }, }, }, labelLine: { show: true, // 是否显示延展线 length: 10, // 延展线条的长度 }, }, ], }); }, },};</script><style lang="less" scoped>.echartsBox { width: 600px; height: 400px;}</style>好忘性不如烂笔头，记录一下

关于echarts:echarts图表页面加载隐藏图表宽度失效问题

echarts初始化暗藏时，不能设置width:100%不能撑起页面，须要通过动静获取对应的宽度，设置宽度，再初始化echarts 如：<div ref="echart" class="echart" v-show="!showBz"></div><div ref="echart1" class="echart" v-show="showBz" :style="{width:${fullW}px}"></div> this.fullW=this.$refs.echart.clientWidth;this.myChart1 = echarts.init(this.$refs.echart1);

关于echarts:echarts图表markLine的用法与设置多条不同颜色markLine

一、在series下，新增markLine：markLine: { symbol: 'none',label:{ // position:[10, 10], color:'#FF1D00', fontSize:12, formatter:"危险(40dB)"},lineStyle:{ type:'solid', color: '#FF1D00', width: 1},data: [ {xAxis: '40', name:'危险(40dB)'},]}, 二、多条不同色彩markLinemarkLine: { symbol: 'none',label:{ color:'#FF1D00', fontSize:12, formatter:"危险(40dB)"},lineStyle:{ type:'solid', color: '#FF1D00', width: 1},data: [{yAxis: '40',lineStyle: {color: '#FF1D00'},label: {color: '#FF1D00',formatter:'危险(40dB)',fontSize:10}},{yAxis: '25',lineStyle: {color: '#FF7804'},label: {color: '#FF7804',formatter:'异样(25dB)',fontSize:10}}]},

关于echarts:echart-图例文字设置不同样式不同系列柱子重叠居中

option = { legend: { formatter: (name)=>{ let arr = '{a|'+name+'}'+'{b|'+name+'西方小道}' return arr }, textStyle:{ rich:{ a:{ fontSize:16, color:'red', padding: [0, 0, 0, 20] }, b:{ fontSize:14, color:'blue', padding: [0, 0, 0, 20] } } }, data:[ '预计', '理论', ], }, xAxis: { show:true, type: 'value', max:200 }, yAxis: [ { type: 'category', axisTick: 'none', axisLine: 'none', data: [] }, { show: false, type: 'category', axisTick: 'none', data: [], axisLine: 'none', }, ], series: [ { name:'理论', type: 'bar', barWidth:'50', yAxisIndex: 0, itemStyle: { color: '#ddd', }, z:2, data: [180] }, { name:'预计', barGap: '-100%', // Make series be overlap barWidth:'60', yAxisIndex: 1, z:1, itemStyle: { color: '#444', }, type: 'bar', data: [200] }, ]};

关于echarts:echarts中的柱状图设置最大值最小值和平均值线条vue项目中

效果图柱状图有时候须要特地标注最大值、最小值，也可能会加均匀一条线，用来辨别数据是否高于或者低于,本文记录一下对应的配置项。咱们先看一下效果图：代码附上次要是通过series外面的markPoint属性配置最大值和最小值，以及markLine设置平均线 <template> <div id="echart"></div></template><script>import Echarts from "echarts";export default { data() { return { myChart: null, option: { tooltip: { show: true, }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], }, yAxis: { type: "value", }, color:"#baf", series: [ { name: "销量", type: "bar", data: [5, 20, 36, 10, 10, 20], // ----------------------看这里往下--------------------------------- markPoint: { // 设置最大值和最小值 data: [ { type: "max", name: "我是最大值", }, { type: "min", name: "我是最小值", }, ], }, markLine:{ // 设置平均线 data:[ { type:"average", name:"我是平均值", color:"#baf" } ] }, // --------------------看这里往上--------------------------------- label:{ // 展现具体柱状图的数值 show:true } }, ], }, }; }, mounted() { this.drawEcharts(); }, methods: { drawEcharts() { this.myChart = Echarts.init(document.getElementById("echart")); this.myChart.setOption(this.option); window.addEventListener("resize", () => { this.myChart.resize(); }); }, },};</script><style lang="less" scoped>#echart { width: 100%; height: 600px;}</style>更多细节的管制能够去官网看对应配置项

关于echarts:vue中设置echarts宽度自适应效果

问题形容咱们应用vue做我的项目的时候，经常须要做到echarts图表的自适应，个别是依据页面的宽度做对应的适应。本文记录一下设置echarts图表的自适应的步骤。咱们先看一下没有做echarts自适应的成果无自适应效果图咱们发现echarts图的宽度并没有随着页面宽度的变动而变动有自适应效果图很显然，这个才是咱们想要的成果代码步骤<template> <div id="echart"></div></template><script>// 第一步，引入echarts插件以供应用import Echarts from "echarts";export default { data() { return { myChart: null, // 定义变量用来寄存echarts实例 option: { // 配置项写在data外面方便管理 title: { text: "ECharts 示例", }, tooltip: {}, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], }, yAxis: {}, series: [ { name: "销量", type: "bar", data: [5, 20, 36, 10, 10, 20], }, ], }, }; }, mounted() { // 第二步，在页面加载渲染的时候执行echarts画图办法 this.drawEcharts(); }, methods: { drawEcharts() { // 第三步，通过echarts的init办法实例化一个echarts对象myChart，并，保留在data变量中 this.myChart = Echarts.init(document.getElementById("echart")); // 第四步，执行myChart的setOption办法去画图，当然至于配置项，咱们要提前配置好，这里的配置项 // 写在data中，不便咱们在一些事件中去批改对应配置项，比方点击按钮更改配置项数据 this.myChart.setOption(this.option); // 第五步，在页面初始化加载的时候绑定页面resize事件监听。补充resize事件：resize事件是在浏览器窗口大小扭转时，会触发。 // 如当用户调整窗口大小，或者最大化、最小化、复原窗口大小显示时触发 resize 事件。 // 咱们个别应用这个事件去做窗口大小与对应元素的大小适配 window.addEventListener("resize", () => { // 第六步，执行echarts自带的resize办法，即可做到让echarts图表自适应 this.myChart.resize(); // 如果有多个echarts，就在这里执行多个echarts实例的resize办法,不过个别要做组件化开发，即一个.vue文件只会搁置一个echarts实例 /* this.myChart2.resize(); this.myChart3.resize(); ...... */ }); }, },};</script><style lang="less" scoped>#echart { width: 100%; height: 600px;}</style>总结好忘性不如烂笔头，记录一下吧。欢送各位大佬批评指正 ...

关于echarts:echarts柱状图y轴数据添加单位的三种方式vue项目

问题形容本文记录一下，vue我的项目中应用echarts，画柱状图，x轴或y轴增加单位的三种形式，以y轴增加单位为例形式一（通过yAxis中的name属性设置）效果图如下：代码如下：<template> <div> <div class="echartsBox" id="main"></div> </div></template><script>export default { data() { return { xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], yData: [115, 198, 88, 77, 99, 123, 176], grid: { // 网格线配置 show: true, lineStyle: { color: ["#e9e9e9"], width: 1, type: "solid", }, }, }; }, watch: { xData() { this.echartsInit(); }, yData() { this.echartsInit(); }, }, mounted() { // 在通过mounted调用让echarts渲染 this.echartsInit(); }, methods: { echartsInit() { let main = document.getElementById("main"); // 获取dom元素作为eacharts的容器 console.log("是否有echarts", this.$echarts); this.$echarts.init(main).setOption({ // 调用echarts办法去绘制echarts图 xAxis: { type: "category", // 类别 data: this.xData, // x轴类别对应的值 axisTick: { // 刻度线管制在柱状图居中 alignWithLabel: true, }, }, grid: { show: true, }, yAxis: { type: "value", // 看这里，看这里，看这里，看这里，看这里，看这里，看这里，看这里，看这里，看这里，看这里，看这里，看这里，看这里， // ----------------------通过name属性加单位，也能够通过nameTextStyle设置对应单位文字款式----------------------- name: "单位（万元）", nameTextStyle: { color: "#aaa", nameLocation: "start", }, }, series: [ { name: "kkk", data: this.yData, type: "bar", // 类型为柱状图 barWidth: 40, // 柱状图的宽度 }, ], }); }, },};</script><style lang="less" scoped>.echartsBox { width: 600px; height: 600px;}</style>形式二所有数据共用一个单位（通过title中的subtext属性设置）代码如下：yAxis: { type: "value",},// 看这里，看这里，看这里，看这里，看这里，看这里，看这里，看这里，看这里，看这里，看这里，看这里，看这里，看这里title: { // title为题目局部，有一级题目text，二级题目subtext。这里咱们应用二级题目，再批改一下这个二级题目的地位即可呈现咱们想要的成果了，当然款式也能够通过title.subtextStyle去配置 subtext: "单位（万元）", left: 24,// 间隔右边地位 top: 16,// 间隔下面地位 subtextStyle:{ // 设置二级题目的款式 color:"#baf" }},series:[......]最终效果图，和形式一的最终成果是统一的形式三每个数据都带有单位（通过yAxis中的axisLabel属性设置）效果图如下： ...

关于echarts:echarts折线图tooltip中图例颜色对应混乱问题

记录一个在用echarts（5.0版本）过程中遇到的问题。工作自身是在同一图表中画多条色彩不同的折线图（type:'line'），但图表渲染实现后发现，鼠标在聚焦图表时显示的tooltip中，图例的色彩与折线的色彩对应不上。例如，原本折线色彩与数据关系为：“数据1——红色”，“数据2——黄色”，“数据3——绿色”，但在tooltip显示的信息中，数据1、数据2和数据3与色彩的对应关系谬误，对应凌乱。通过一番折腾才发现，如果将指定线条色彩款式的办法由“lineStyle”替换为“itemStyle”，那么tooltip中数据与折线线条色彩的对应关系就能失常对应起来。在echarts官网文档中，能够找到在折线图中，itemStyle的含意： > series-line. itemStyle：折线拐点标记的款式。因而揣测，折线图的tooltip中色彩与数据的对应信息由拐点的色彩款式决定。

关于echarts:插件图表Echarts使用笔记

一、开始官网： https://echarts.apache.org/zh... 配置文档：https://echarts.apache.org/zh... 术语速查手册：https://echarts.apache.org/zh...能疾速理解每个地位的组件的名字，而后在文档配置项里疾速查看反对什么参数。二、 5分钟上手ECharts步骤： 1、引入》 2、筹备容器》3、初始化实例并设定配置项 <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title>  <script src="echarts.min.js"></script></head><body>  <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于筹备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = {...}; //各种配置 // 应用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script></body></html>三、Vue ECharts全局引入与按需援用## 装置 npm install echarts --save1、全局引入步骤： mainjs中配置注册组件》组件中间接应用this.$echarts ## 在main.js中配置import echarts from 'echarts' //引入echartsVue.prototype.$echarts = echarts //注册组件## 应用<div id="myChart" :style="{width: '300px', height: '300px'}"></div><script>export default { name: 'eCharts', data () { return { msg: 'Welcome to Your Vue.js App' } }, mounted(){ this.drawLine(); }, methods: { drawLine(){ // 基于筹备好的dom，初始化echarts实例 var myChart = this.$echarts.init(document.getElementById('myChart')) // 绘制图表 myChart.setOption({}); //各种配置 } }}</script>2、按需引入步骤：不须要在main.js中配置。在组件里按需引入应用echarts ...

关于echarts:Echarts-数据未同步渲染怎么办设置数据动态更新

1. 数据动静更新问题问题：当咱们须要动静频繁的依据数据去变动图表的时候会呈现以下问题数据发生变化，可图表却没有从新渲染数据错乱问题大量数据导致图表款式错乱bug步骤一首先模仿大量数据进入渲染图表。此处咱们应用websocket进行模仿（正在做大数据可视化的小伙伴能够用到）步骤二新建图表子组件配置echarts 图表步骤三通过 onmessage办法监听到承受的数据后传递给图表子组件。子组件通过 watch 监听的形式监听数据流图表如下依据如上根底配置能够看出每当新的一条数据进来时都会反复调用 this.lineonedata(); 这个办法使得图表始终处于刷新状态当数据流进入过大的时候仍然会导致卡顿问题解决办法：依据如上问题有两种广泛解决办法如下应用 echarts.dispose() 办法将之前的实例删除掉而后应用 echarts.init() 办法从新发明一个新的实例。echarts.dispose()形容：开释图表实例，开释后实例不再可用。执行 echarts.clear() 办法清空以后实例，会移除以后实例的组件和图表。再从新应用 setOptions()咱们来看看官网的形容能够看到二者之间的区别 echarts.dispose() 办法会将整个 echarts实例进行销毁。须要从新应用 echarts.init() 办法才会从新刷新数据执行 echarts.clear() 办法只会清空以后实例的内容，并不会进行销毁。咱们只须要从新应用setOption() 就能够看到最新的数据。以上两种解决办法是能够看见图表从新进行渲染达到想要的目标。然而当数据量特地微小，如websocket每秒进入上百条数据时。echarts图表依然会有稍微科顿解决办法1 ：当数据量大首先将 animation 设置为 false，因为大部分类型图表都会提供一个开关动画的参数，把它关掉图表会有一个疾速闪动的动作。解决办法2 : 将setOptions() 第二个参数设置为 true当批改setOption值的时候，咱们异步回来的数据层级比拟深的状况下，须要echarts重绘，否则不会如愿显示次要体现，你减少数据能够，然而缩小数据，发现视图上还是放弃着最多数据的展现成果，很纳闷，明明能够通过移步批改数据，为何减少能够绘制地图而缩小如同就什么都没有做解决办法如下： ...

关于echarts:记录一下在使用echarts的地图插件过程中遇到的标注icon自定义路径的问题

要实现的成果在地图上的各个地区增加自定义图标（默认 echarts 只有三种可选图标） echarts的series办法中有一个symbol属性能够引入图片门路，以下列出三种办法：第一种：链接引入在symbol中间接引入图片的门路，留神格局，要加image://symbolRotate: 35,示意旋转的角度第二种：base64格局引入 base64格局引入的话，其中须要留神的问题是是base64代码串不能换行，要显示在一行.如果是png格局的图片能够在上网进行转换解析出图片的base64格局这样会主动转换出base64码，间接在symbol中引入即可。第三种：svg图引入这是最罕用的一种，也是官网用的办法，svg图用notepad++软件或者记事本关上，将d属性值复制进去后面加path://即可这样标注就显示在了地图下面，另外记得设置出须要标注的地点和数据，如代码中的data。第四种：应用 Echarts 办法 convertToPixel() 和 CSS款式增加图标（可增加 gif 动图）解决echarts 展现动静gif图无奈失常显示gif图问题HTML CSS 局部：此处咱们应用 vue.js 使得能够将地图上各个区域的图片进行v-for 循环进去CSS局部给.map增加绝对定位给img增加相对定位应用行内款式动静绑定 top 以及 left .chart 为咱们的图表只需在边上新建img标签 Javascript 局部：此处应用 charts 办法 convertToPixel() 办法将中国地图的经度，纬度转换为对应的 px（单位）间隔将解决好的坐标放入新的数组应用v-for 循环。地图上即可显示动静 gif 图标

关于echarts:echarts常见配置

x轴、y轴label自定义yAxis: { axisLabel: { textStyle: { color: '#fff' ,fontFamily: 'TencentSans',fontSize:'18px'} }}图标柱状、折线款式series: [{ data:[], lineStyle: { color: '#5470C6', width: 1, type: 'dashed' },}]渐变色import * as echarts from 'echarts/core';new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ {offset: 0, color: '#03F5FF'}, {offset: 1, color: '#00A2FF'} ])继续更新...

关于vue.js:vue中嵌入echarts的方法

如何在vue中更好的应用echarts，实际上不仅是echarts，antv、腾讯地图、百度地图...都实用，他们有个独特的特点，就是其加载流程都是：创立DOM、找到DOM、渲染地图、完结。我的思路是应用vue的render函数，在render函数中创立一个DOM节点，而后在初始化地图的时候通过ID找到dom进行渲染，然而这里有个问题，就是id的命令，在现场开发的时候呈现了个问题，就是打包后图表组件切换过程中没有即便销毁，导致二次渲染的时候无奈失常渲染，因为呈现了两个id同名的dom。所以咱们思考在created阶段中创立一个惟一的domId,而后在montend阶段通过保护在data中的domId找到DOM进行地图渲染，最初在beforeUnmount阶段卸载这个dom。<script>import {h} from 'vue'export default { data(){ return { domId:'', dom:null } }, created(){ // 初始化domID this.domId ='chart_container_'+Math.round( Math.random()*100000); }, mounted(){ // 初始化地图 this.initChart(); }, beforeUnmount(){ // 卸载的时候挪出dom this.dom.parentNode.removeChild(this.dom); }, methods:{ initChart(){ let dom = document.getElementById(this.domId); this.dom = dom; dom.style.height = '260px'; let chart = this.$echarts.init(dom); let 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' }] }; chart.setOption(option); } }, render(){ return h( 'div', { id: this.domId } ) }}</script>

关于echarts:echarts实现渐变矩形水球图

1. 下载echarts和echarts-liquidfillnpm install echarts --savenpm install echarts-liquidfill 2. main.jsimport * as echarts from 'echarts'import 'echarts-liquidfill'Vue.prototype.$echarts = echarts3. html<div class="chart-box"> <div class="liquidFill" ref="liquidFill"></div></div>4. css.chart-box { width: 45px; height: 120px; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #061633; .liquidFill { width: 100%; height: 100%; }}5. jsexport default { mounted () { this.draw(0.6) }, methods: { draw (data) { const chart = this.$echarts.init(this.$refs.liquidFill) const dataOption = { value: data, itemStyle: { color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(128, 255, 165)' }, { offset: 1, color: 'rgba(1, 191, 236)' }]) } } const option = { series: [ { type: 'liquidFill', shape: 'rect', radius: 120, amplitude: '8%', // 振幅 data: [dataOption, dataOption], backgroundStyle: { color: 'rgba(255, 255, 255, 0)' }, outline: { show: false }, label: { normal: { show: false, formatter: '' } } } ] } chart.setOption(option) }}6. 最终实现成果 ...

关于echarts:动态渲染拓扑图方案探究

前言拓扑图是数据可视化畛域一种比拟常见的展现类型，目前业界常见的可视化展示的计划有ECharts、HighCharts、D3、AntV等。以后的我的项目应用的是基于ECharts的动态关系图渲染，为了后续可能扩大成动静的拓扑图渲染，本文摸索了ECharts的原理以及G6的原理，也算是对自研一个可视化库的根本实现办法做了一个梳理。计划抉择ECharts 关系图AntV G6 Graphin源码解析ECharts源码整个ECharts外围对外输入是一个大的ECharts类，所有的类型都是基于其进行new进去的实例，而其外围是基于对ZRender这样一个Canvas的封装 ECharts class ECharts extends Eventful { // 公共属性 group: string; // 公有属性 private _zr: zrender.ZRenderType; private _dom: HTMLElement; private _model: GlobalModel; private _throttledZrFlush: zrender.ZRenderType extends {flush: infer R} ? R : never; private _theme: ThemeOption; private _locale: LocaleOption; private _chartsViews: ChartView[] = []; private _chartsMap: {[viewId: string]: ChartView} = {}; private _componentsViews: ComponentView[] = []; private _componentsMap: {[viewId: string]: ComponentView} = {}; private _coordSysMgr: CoordinateSystemManager; private _api: ExtensionAPI; private _scheduler: Scheduler; private _messageCenter: MessageCenter; private _pendingActions: Payload[] = []; private _disposed: boolean; private _loadingFX: LoadingEffect; private _labelManager: LabelManager; private [OPTION_UPDATED_KEY]: boolean | {silent: boolean}; private [IN_MAIN_PROCESS_KEY]: boolean; private [CONNECT_STATUS_KEY]: ConnectStatus; private [STATUS_NEEDS_UPDATE_KEY]: boolean; // 爱护属性 protected _$eventProcessor: never; constructor( dom: HTMLElement, theme?: string | ThemeOption, opts?: { locale?: string | LocaleOption, renderer?: RendererType, devicePixelRatio?: number, useDirtyRect?: boolean, width?: number, height?: number } ) { super(new ECEventProcessor()); opts = opts || {}; if (typeof theme === 'string') { theme = themeStorage[theme] as object; } this._dom = dom; let defaultRenderer = 'canvas'; const zr = this._zr = zrender.init(dom, { renderer: opts.renderer || defaultRenderer, devicePixelRatio: opts.devicePixelRatio, width: opts.width, height: opts.height, useDirtyRect: opts.useDirtyRect == null ? defaultUseDirtyRect : opts.useDirtyRect }); this._locale = createLocaleObject(opts.locale || SYSTEM_LANG); this._coordSysMgr = new CoordinateSystemManager(); const api = this._api = createExtensionAPI(this); this._scheduler = new Scheduler(this, api, dataProcessorFuncs, visualFuncs); this._initEvents(); zr.animation.on('frame', this._onframe, this); bindRenderedEvent(zr, this); bindMouseEvent(zr, this); } private _onframe(): void {} getDom(): HTMLElement { return this._dom; } getId(): string { return this.id; } getZr(): zrender.ZRenderType { return this._zr; } setOption<Opt extends ECBasicOption>(option: Opt, notMerge?: boolean | SetOptionOpts, lazyUpdate?: boolean): void { if (lazyUpdate) { this[OPTION_UPDATED_KEY] = {silent: silent}; this[IN_MAIN_PROCESS_KEY] = false; this.getZr().wakeUp(); } else { prepare(this); updateMethods.update.call(this); this._zr.flush(); this[OPTION_UPDATED_KEY] = false; this[IN_MAIN_PROCESS_KEY] = false; flushPendingActions.call(this, silent); triggerUpdatedEvent.call(this, silent); } } private getModel(): GlobalModel { return this._model; } getRenderedCanvas(opts?: { backgroundColor?: ZRColor pixelRatio?: number }): HTMLCanvasElement { if (!env.canvasSupported) { return; } opts = zrUtil.extend({}, opts || {}); opts.pixelRatio = opts.pixelRatio || this.getDevicePixelRatio(); opts.backgroundColor = opts.backgroundColor || this._model.get('backgroundColor'); const zr = this._zr; return (zr.painter as CanvasPainter).getRenderedCanvas(opts); } private _initEvents(): void { each(MOUSE_EVENT_NAMES, (eveName) => { const handler = (e: ElementEvent) => { const ecModel = this.getModel(); const el = e.target; let params: ECEvent; const isGlobalOut = eveName === 'globalout'; if (isGlobalOut) { params = {} as ECEvent; } else { el && findEventDispatcher(el, (parent) => { const ecData = getECData(parent); if (ecData && ecData.dataIndex != null) { const dataModel = ecData.dataModel || ecModel.getSeriesByIndex(ecData.seriesIndex); params = ( dataModel && dataModel.getDataParams(ecData.dataIndex, ecData.dataType) || {} ) as ECEvent; return true; } // If element has custom eventData of components else if (ecData.eventData) { params = zrUtil.extend({}, ecData.eventData) as ECEvent; return true; } }, true); } if (params) { let componentType = params.componentType; let componentIndex = params.componentIndex; if (componentType === 'markLine' || componentType === 'markPoint' || componentType === 'markArea' ) { componentType = 'series'; componentIndex = params.seriesIndex; } const model = componentType && componentIndex != null && ecModel.getComponent(componentType, componentIndex); const view = model && this[ model.mainType === 'series' ? '_chartsMap' : '_componentsMap' ][model.__viewId]; params.event = e; params.type = eveName; (this._$eventProcessor as ECEventProcessor).eventInfo = { targetEl: el, packedEvent: params, model: model, view: view }; this.trigger(eveName, params); } }; (handler as any).zrEventfulCallAtLast = true; this._zr.on(eveName, handler, this); }); each(eventActionMap, (actionType, eventType) => { this._messageCenter.on(eventType, function (event) { this.trigger(eventType, event); }, this); }); // Extra events // TODO register? each( ['selectchanged'], (eventType) => { this._messageCenter.on(eventType, function (event) { this.trigger(eventType, event); }, this); } ); handleLegacySelectEvents(this._messageCenter, this, this._api); } dispatchAction( payload: Payload, opt?: boolean | { silent?: boolean, flush?: boolean | undefined } ): void { const silent = opt.silent; doDispatchAction.call(this, payload, silent); const flush = opt.flush; if (flush) { this._zr.flush(); } else if (flush !== false && env.browser.weChat) { this._throttledZrFlush(); } flushPendingActions.call(this, silent); triggerUpdatedEvent.call(this, silent); }}ZRender ...

关于echarts:生成地图json网站

省份json数据都须要免费了！！！，这是能够收费生成地图json。 https://account.aliyun.com/login/login.htm?oauth_callback=http://datav.aliyun.com/

关于echarts:echarts柱状图组件封装2

echarts柱状图组件封装21.开发环境 vue+echarts2.电脑系统 windows10专业版3.在应用vue+echarts开发的过程中,咱们常常会绘制柱状图,上面是我对echarts柱状图组件的封装,心愿对你有所帮忙。4.在模板中增加如下代码: <template> <div class="chenechartsmol1"> <div id="chenhui22" style="width: 100%; height: 100%"></div> </div></template><style>html,body { width: 100%; height: 100%; box-sizing: border-box; padding: 0; margin: 0;}.chenechartsmol1 { width: 100%; height: 100%; box-sizing: border-box; padding: 0; margin: 0; /* border: 2px solid yellow; */}</style><script>import echarts from "echarts";export default { name: "Chenzzt2", data() { return {}; }, mounted() { this.$nextTick(() => { this.tt(); }); }, methods: { tt() { this.Chenoption = { tooltip: { trigger: "axis", }, grid: { top: "0%", left: "2%", right: "0%", bottom: "0%", containLabel: true, }, xAxis: [ { type: "category", show: false, data: [ 10, 12, 22, 22, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, ], axisPointer: { type: "shadow", }, }, ], yAxis: [ { type: "value", name: "", show: false, }, { type: "value", name: "", show: false, }, ], series: [ { name: "", type: "bar", //设定实线点的色彩 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, ], // barWidth:30, barGap: "0" /*多个并排柱子设置柱子之间的间距*/, barCategoryGap: "0" /*多个并排柱子设置柱子之间的间距*/, }, { name: "", type: "line", showSymbol: true, symbol: 'circle', //设定为实心点 symbolSize: 4, //设定实心点的大小 color:"#00808c", yAxisIndex: 1, 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, ], }, ], }; this.drawChart("chenhui22", this.Chenoption); }, drawChart(drawChartId, Chenoption) { this.myChart = echarts.init(document.getElementById(drawChartId)); let option = Chenoption; // 指定图表的配置项和数据 this.myChart.setOption(option); window.onresize = function () { myChart.resize(); }; }, },};</script>5.效果图如下:6.本期的分享到了这里就完结啦,是不是很nice,心愿对你有所帮忙,让咱们一起致力走向巅峰! ...

关于echarts:echarts折线图组件封装

echarts折线图组件封装1.开发环境 vue+echarts2.电脑系统 windows10专业版3.在应用 vue+echarts开发的过程中,咱们会常常应用到折线图,上面是我对折线图组件的封装,心愿对你有所帮忙!4.在组件中增加如下代码: <template> <div class="zhex"> <div :id="ZhexObj.id" style="width: 100%; height: 100%"></div> </div></template><style>html,body { width: 100%; height: 100%; margin: 0; padding: 0;}.zhex{ width: 100%; height: 96%; box-sizing: border-box; /* border: 2px solid yellow; */}</style><script>import echarts from "echarts";export default { name: "Zhex", props: ["ZhexObj"], data() { return { chenda: this.ZhexObj, }; }, created() {}, mounted() { this.$nextTick(() => { let max = this.chenda.max; let min = this.chenda.min; let mai = (min + max) / 2 - min; console.log(this.chenda); let data=this.chenda.data; this.tt(max, min, mai, this.chenda.id, this.chenda.title,data); }); }, watch: { chenda: { handler(newValue, oldValue) { console.log(newValue); console.log("变动"); console.log(newValue); let max = newValue.max; let min = newValue.min; let mai = (min + max) / 2 - min; let id = newValue.id; let title = newValue.title; console.log(this.chenda); this.$nextTick(() => { this.tt(max, min, mai, id, title); }) }, deep: true, }, }, methods: { dataObjfun() { console.log("产生了变动"); console.log("+++++++++++"); }, // 封装 echarts 画图一 drawChart(drawChartId, Chenoption) { this.myChart = echarts.init(document.getElementById(drawChartId)); let option = Chenoption; // 指定图表的配置项和数据 this.myChart.setOption(option); window.onresize = function () { myChart.resize(); }; }, // 封装 echarts 画图一完结啦 // 封装 echarts 画图二 //留神:进行了封装 tt(max, min, mai, id, title,data) { // console.log(max, min, mai, mi); this.Chenoption = { title: { text: title, left: "center", textStyle: { fontSize: 18, //字体大小 color: "#bfbfbf", //字体色彩 }, }, tooltip: { trigger: "axis", }, xAxis: { type: "category", boundaryGap: false, show: false, // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", ""], data: data, }, yAxis: { type: "value", axisLine: { show: false, }, min: min, max: max, axisLabel: { show: true, textStyle: { color: "#ffffff", }, }, interval:mai, splitLine: { //网格线 lineStyle: { type: "dashed", //设置网格线类型 dotted：虚线 solid:实线 width: 2, color:"green" }, show: true, //暗藏或显示 }, }, series: [ { // data: [820, 932, 901, 934, 1290, 1330, 1320], data:data, type: "line", showSymbol: true, symbol: "circle", //设定为实心点 symbolSize: 10, //设定实心点的大小 color: "#00808c", //设定实线点的色彩 }, ], }; // console.log(this.Chenoption.yAxis.min); // this.Chenoption.yAxis.interval=(this.Chenoption.yAxis.min+this.Chenoption.yAxis.max)/2; this.drawChart(id, this.Chenoption); }, // 封装 echarts 画图二完结啦 },};</script>5.在父组件中增加如下代码: ...

关于echarts:echarts彩虹图组件封装

echarts彩虹图组件封装1.开发环境 vue+echarts2.电脑系统 windows10专业版3.在应用vue+echarts开发的过程中,咱们可能会须要绘制彩虹图,上面我来分享一下,vue中应用echarts彩虹图的组件封装。4在组件中增加如下代码: <template> <div id="chenechartsmo"> <div :id="dataObjpro.id" v-if="chenda.show" style="width: 100%; height: 100%"></div> </div></template><style>html,body { width: 100%; height: 100%; margin: 0; padding: 0;}#chenechartsmo { width: 100%; height: 96%; box-sizing: border-box; /* border: 2px solid yellow; */}</style><script>import echarts from "echarts";export default { name: "Chenykt", props: ["dataObjpro"], data() { return { chenda: this.dataObjpro, }; }, created() {}, mounted() { this.$nextTick(() => { let max = this.chenda.max; let min = this.chenda.min; let mai = (min + max) / 2 - min; let mi = (max - min) / 10; let data=this.chenda.data; console.log(this.chenda); this.tt(max, min, mai, mi, this.chenda.id, this.chenda.title,data); }); }, watch: { chenda: { handler(newValue, oldValue) { console.log(newValue); console.log("变动"); console.log(newValue); let max = newValue.max; let min = newValue.min; let mai = (min + max) / 2 - min; let mi = (max - min) / 10; let id = newValue.id; let title = newValue.title; let data=newValue.data; console.log(this.chenda); this.$nextTick(() => { this.tt(max, min, mai, mi, id, title,data); }) }, deep: true, }, }, methods: { dataObjfun() { console.log("产生了变动"); console.log("+++++++++++"); }, // 封装 echarts 画图一 drawChart(drawChartId, Chenoption) { this.myChart = echarts.init(document.getElementById(drawChartId)); let option = Chenoption; // 指定图表的配置项和数据 this.myChart.setOption(option); window.onresize = function () { myChart.resize(); }; }, // 封装 echarts 画图一完结啦 // 封装 echarts 画图二 //留神:进行了封装 tt(max, min, mai, mi, id, title,data) { // console.log(max, min, mai, mi); this.Chenoption = { // backgroundColor: "rgba(128, 128, 128, 1)", title: { text: title, left: "50%", top: "-1%", botom: "5%", textStyle: { fontSize: 18, //字体大小 color: "#bfbfbf", //字体色彩 }, }, tooltip: { trigger: "axis", }, legend: { // orient: 'vertical', show: false, left: "rigth", // data: ["邮件营销", "联盟广告", "视频广告", "间接拜访", "搜索引擎"], data:data }, grid: { top: "14%", left: "3%", right: "1%", bottom: "3%", containLabel: true, }, xAxis: { type: "category", boundaryGap: false, axisTick: { show: false }, axisLabel: { show: true, textStyle: { color: "none", }, }, // show:false, // data: [120, 132, 101, 134, 90, 230, 210, 36], data:data }, yAxis: { type: "value", boundaryGap: false, min: min, max: max, interval: mai, axisLine: { show: false, }, axisLabel: { show: true, textStyle: { color: "#ffffff", fontWeight: 700, fontSize: 12, }, }, }, series: [ { name: "", type: "line", // data: [120, 132, 101, 134, 90, 230, 210, 36], data:data, showSymbol: true, symbol: "circle", //设定为实心点 symbolSize: 10, color: "#000", lineStyle: { normal: { width: 2, color: "#000", }, }, }, { name: "", type: "line", animation: false, hoverAnimation: false, markArea: { data: [ [ { yAxis: min, itemStyle: { color: "#FF0000", // color:'black' }, }, { yAxis: mi + min, }, ], ], }, }, { name: "", type: "line", animation: false, hoverAnimation: false, markArea: { data: [ [ { yAxis: mi + min, itemStyle: { color: "#FFFF00", }, }, { yAxis: mi + min + mi * 2, }, ], ], }, }, { name: "", type: "line", animation: false, hoverAnimation: false, markArea: { data: [ [ { yAxis: mi + min + mi * 2, itemStyle: { color: "#00B050", }, }, { yAxis: mi + min + mi * 6, }, ], ], }, }, { name: "", type: "line", animation: false, hoverAnimation: false, markArea: { data: [ [ { yAxis: mi + min + mi * 6, itemStyle: { color: "#FFFF00", }, }, { yAxis: mi + min + mi * 8, }, ], ], }, }, { name: "", type: "line", animation: false, hoverAnimation: false, markArea: { data: [ [ { yAxis: mi + min + mi * 8, itemStyle: { color: "#FF0000", }, }, { yAxis: mi + min + mi * 10, }, ], ], }, }, { name: "", type: "line", smooth: "true", symbol: "circle", //设置拐点 symbolSize: 100, //设置拐点的大小 itemStyle: { //拐点的属性 color: "#6633cc", }, lineStyle: { color: "#6633cc", width: 5, }, }, ], }; // console.log(this.Chenoption.yAxis.min); // this.Chenoption.yAxis.interval=(this.Chenoption.yAxis.min+this.Chenoption.yAxis.max)/2; this.drawChart(id, this.Chenoption); }, // 封装 echarts 画图二完结啦 },};</script>5.在父组件中应用办法如下: ...

关于echarts:echarts-坐标轴两侧留白-boundrygap

echarts 坐标轴两侧留白 boundrygap1.开发环境 vue+echarts2.电脑系统 windows10专业版3.在应用echarts+vue开发的过程中,官网案例批改之后效果图: 依据这个图,咱们看到了折线并没有铺满整个盒子,x轴的两边都留了一些间距,这样的成果在不同的我的项目中是不能够的,想要的是线条铺满这个盒子,实现办法如下:4.批改过后的效果图如下: 如何实现呢?在x轴中增加如下代码:boundaryGap: false, //配置的意思:坐标轴两边是否留白,默认值是 true5.本期的分享到了这里就完结啦,是不是很nice,心愿对你有所帮忙,让咱们一起致力走向巅峰!

关于echarts:echarts去掉x轴刻度和文字

echarts去掉x轴刻度1.开发环境 vue+echarts2.电脑系统 windows10专业版3.在应用echarts开发的过程中,暗藏x轴刻度和文字,我来进行一下分享,心愿对你有所帮忙!4.在这里举例彩虹图,没去掉x轴刻度和文字,成果如下:5.很多敌人的解决方案是: //在 xAxis 上面配置:show:false,5-1.然而这样在彩虹图的底部呈现一个红色的线条,效果图如下: //这样的配置实现的成果很显著不是咱们想要的,请看上面的办法6.在 xAxis中增加如下代码: xAxis: { type: "category", boundaryGap: true, axisTick: { show: false }, axisLabel: { show: true, textStyle: { color: "none", }, }, // show:false, // data: [120, 132, 101, 134, 90, 230, 210, 36], data:data },6-1.失去的成果如下: 彩虹图的底部没有刻度线和文字,也没有红色的线条7.本期的分享到了这里就完结啦,是不是很nice,心愿对你有所帮忙,让咱们一起致力走向巅峰!

关于echarts:echarts配置饼图pro

echarts配置饼图pro1.开发环境 vue+echarts2.电脑系统 windows10专业版3.在应用 vue+echarts开发的过程中,咱们常常会应用到饼图,上面是我应用的一些分享,心愿对你有所帮忙!4.echarts官网案例,通过简略,效果图如下:5.代码如下: this.Chenoption= { tooltip: { trigger: "item", formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: "vertical", left: 0, itemWidth: 30, show: false, //管制右边方形状态的显示 itemHeight: 16, textStyle: { fontSize: 16, //字体大小 color: "wheat", //字体色彩 }, }, series: [ { name: "", type: "pie", left: 0, radius: ["35%", "75%"], //管制饼图的大小 label: { formatter: ' {b|{b}：} {per|{d}%} ', backgroundColor: "#eee", borderColor: "#aaa", borderWidth: 4, //管制悬浮信息边框的大小 borderRadius: 4, rich: { a: { color: "#999", lineHeight: 22, align: "center", }, hr: { borderColor: "#aaa", width: "100%", borderWidth: 0.5, height: 0, }, b: { fontSize: 16, lineHeight: 33, }, per: { color: "#eee", backgroundColor: "#334455", padding: [2, 4], borderRadius: 2, }, }, }, data: data, }, ], };6.在做我的项目中,咱们也会有其余的需要,如何把百分比换成具体的数值,成果如下:7.代码配置如下: ...

关于echarts:echarts绘制彩虹图去掉底部白色线条

echarts绘制彩虹图去掉底部红色线条1.开发环境 vue+echarts2.电脑系统 windows10专业版3.在应用vue+echart绘制彩虹图的时候,遇到的一些问题,上面是我的分享,心愿对你有所帮忙!4.问题形容: 在彩虹图的底部多一条红色的线条,效果图如下:5.解决方案如下: //解决方案是:删除 x 中配置的 show:false6.实现5的操作,成果如下: //此时彩虹图的底部就没有红色的线条了7.本期的分享到了这里就完结啦,是不是很nice,心愿对你有所帮忙,让咱们一起致力走向巅峰!

关于echarts:echarts折线图配置虚线

关于echarts:echarts折线图配置

echarts折线图配置1.开发环境 vue+element+echarts2.电脑系统 windows10专业版3.在开发的过程中,咱们常常会应用到 echarts的折线图,依据我的项目,总会有各种奇葩的需要,要实现的成果如下:4.我的项目要求,y轴只能显示三个值,两头的显示的值是下面的值+上面的值/2,怎么实现这个成果呢?代码如下: let Chente: any = { grid: { left: '0%', right: '4%', // bottom: '-3%', containLabel: true }, tooltip: { trigger: 'axis' }, xAxis: { type: 'category', data: ['', '', '', '', '', '', '','', '', '', '', '', '', '','', '', '', '', '', '', '','', '', '', '', '', '', ''], show:false }, yAxis: { type: 'value', max:Chentemax, min:Chentemin, interval:MAI, //设置两头值, axisLabel: { show: true, textStyle: { color: '#ffffff', fontWeight:900, fontSize:18 } } }, series: [{ // data: [820, 932, 901, 934, 1290, 1330, 1320], data:ChenteArr, type: 'line' }] };//这个是通过传参的办法,实现的5.本期的教程到了这里就完结啦,是不是很简略!让咱们一起致力走向巅峰! ...

关于echarts:echarts多型柱状图配置

echarts多型柱状图配置1.电脑系统 windows10 专业版2.代码如下: let bottom2cx: any = { tooltip: { trigger: "axis", axisPointer: { // 坐标轴指示器，坐标轴触发无效 type: "shadow", // 默认为直线，可选为：'line' | 'shadow' }, }, legend: { data: ["打算加工数", "理论加工数", "合格数", "产线节奏"], itemWidth: 30, itemHeight: 20, top: "5%", textStyle: { fontSize: 16, //字体大小 color: "wheat", //字体色彩 }, }, grid: { top: "14%", left: "3%", right: "4%", // bottom: "3%", containLabel: true, }, xAxis: { type: "value", show: false, }, yAxis: { type: "category", data: [ "拆卸一线", "拆卸二线", // "拆卸三线", // "拆卸四线", // "拆卸五线", // "拆卸六线", // "拆卸七线", // "拆卸八线", // "拆卸九线", // "拆卸十线", // "拆卸十一线", // "拆卸十二线", // "拆卸十三线", // "拆卸十四线", // "拆卸十五线", // "拆卸十六线", // "拆卸十七线", // "拆卸十八线" ], axisLabel: { // 管制y轴刻度显示 show: true, textStyle: { color: "wheat", }, }, // data: [ // "拆卸一线", // "拆卸二线", // "拆卸三线", // "拆卸四线", // "拆卸五线", // "拆卸六线", // "拆卸七线", // "拆卸八线", // "拆卸九线", // "拆卸十线", // "拆卸十一线", // "拆卸十二线", // "拆卸十三线", // "拆卸十四线", // "拆卸十五线", // "拆卸十六线", // "拆卸十七线", // "拆卸十八线", // "拆卸十九线", // "拆卸二十线", // ], }, series: [ { name: "打算加工数", type: "bar", stack: "总量", label: { show: true, position: "insideRight", }, // data: [320, 302, 301, 334, 390, 330, 320, 415, 300, 360], data: [320, 302], }, { name: "理论加工数", type: "bar", stack: "总量", label: { show: true, position: "insideRight", }, // data: [120, 132, 101, 134, 90, 230, 210, 600, 400, 500], data: [120, 132], }, { name: "合格数", type: "bar", stack: "总量", label: { show: true, position: "insideRight", }, // data: [150, 212, 201, 154, 190, 330, 410, 670, 301, 340], data: [150, 212], }, ], };3.成果如如下:4.本期的教程到了这里完结啦! ...

关于echarts:echarts柱状图柱柱子的大小

echarts柱状图柱柱子的大小1.开发环境 vue+element+echarts2.电脑系统 windows10 专业版3.在开发的过程中,咱们常常会做一些柱状图,这里我抉择的是 echarts,平时咱们要应用一些柱状图,柱状图的大小怎么管制呢?办法如下: series: [ { barWidth:30,//管制柱状图的大小 name: '', type: 'bar', stack: '总量', label: { show: true, position: 'inside' }, data: [2900, 1200, 300, 200, 900, 300] } ] //留神:这样的配置,你会发现,柱状图下面显示的有对应的数值,2900/1200/200/900/300 鼠标移入到对应的柱状图下面也会显示!4.本期的教程到了这里就完结啊啦,让咱们一起致力走向巅峰!

关于echarts:三个pie交互

`var placeHolderStyle = { normal: { label: { show: false }, labelLine: { show: false }, color: "rgba(0,0,0,0)", borderWidth: 0},emphasis: { color: "rgba(0,0,0,0)", borderWidth: 0}}; option = { series: [ { name: '', type: 'pie', startAngle: 0, radius: ['40%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ {value: 10, name: '10', }, { value: 5, itemStyle: placeHolderStyle, }, ] }, { name: '', type: 'pie', startAngle: (5/15*360), radius: ['40%', '60%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ {value: 7, name: '7', }, { value: 8, itemStyle: placeHolderStyle, }, ] },{ name: '', type: 'pie', startAngle: ((5/15+8/15+2/15)*360), radius: ['40%', '50%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ {value: 2, name: '2',itemStyle:{color:'pink'} }, { value: 13, itemStyle: placeHolderStyle, }, ] }]};` ...

关于echarts:echarts中flex布局可能会导致高度不能适应的问题

前言在我的项目中应用echarts开发图表，常常会有几个图表并排展现的需要，而图表又是须要平均分配空间的时候，我会首先想到flex布局，flex布局也是开发自适应网站时的首选布局形式，目前最举荐的页面布局技巧遇到的问题在flex布局中，外层父div包裹了三个子div，三个子div高度须要均匀，设置了子div的flex均为1使其高度均匀主动调配，留神如果是在垂直方向上，父元素须要设置flex-direction: column;，在页面全屏和放大的时候，echarts的resize可能会使某一个图表高度自适应失败预期的成果剖析起因我猜想：echarts在调用resize时会重绘，如果你的子div没有设置高度，只是设置了flex：1；那么会有如下场景产生：触发三个图表resize后，子元素高度全为0，父元素高度也为0，会导致第一个重绘实现的图表所在的子div高度不明确，可能会使得第一个绘制实现的图表高度在resize后还是默认的高度解决办法给每个子div设置一个默认最小高度，这个高度不能与你预期的高度差太多，能够应用百分比，如下：父div： .box { // 父div height: 100%; display: flex; flex-direction: column;}子div： .item { // 子div flex: 1; min-height: calc(100%/3.33);}

关于echarts:echarts饼图显示颜色修改

在应用echarts中,咱们可能依据需要要批改饼图的块的色彩,开发环境vue+echarts,电脑是:windows10专业版在开发的过程中,如何批改echarts中饼图的默认的背景色彩?办法如下:效果图如下:实现这一块的思路如下:这一块是本人写死的假数据,只须要在 data上面增加 itemStyle就能够啦,如下图此时,你会发现,色彩胜利的批改了。是不是很简略! 这一块是来自后盾的数据,只须要让后盾返回对应的数据类型就能够啦。数据结构和下面是一样的!是不是很简略! //本期的解说,到这里就完结啦!让咱们一起致力!一起提高!

关于echarts:如何才能导出和打印-Echarts-图形

【摘要】Echarts，江湖人称一个纯 Javascript 的图表库，图形品种星罗棋布且个个颜值爆表，能够轻松驾驭 PC 和挪动设施，与绝大部分浏览器都可称兄道弟，而且未然泛滥拥趸，还有不少报表对它采取了嫁接技术。这么棒的图标库如何能在报表工具里导出和打印呢？Echarts 图形是由 Javascript 亲自在前端网页上绘制的，须要从浏览器中截取图形能力导出和打印，而报表工具的导出性能是在后盾实现的。所以这就有肯定难度了，快去乾学院看个到底：如何能力导出和打印 Echarts 图形？！地球人都晓得，报表工具个别都有导出和打印的性能，不仅能够将图形在页面上显示，还能够导出到 WORD、PDF 等文件中进步逼格，或者间接打印进去以供参考。So，每个 baby 都心愿被集成的 Echarts 图形也能够，也能够和报表工具自身的那些美腻图形一样被导出打印。然而，没那么简略！Echarts 图形是由 Javascript 亲自在前端网页上绘制的，须要从浏览器中截取图形能力导出和打印，而报表工具的导出性能是在后盾实现的。噢？这就麻烦啦，还须要把浏览器画进去的图形取下来再啃吃啃吃传递给后盾服务器。而且，万一报表有很多页呢，万一页面上不全副显示呢，那导出时还没出现的图就无奈截取了；打印也是相似地，个别报表工具的打印是用 Applet、FLASH 或导出成 PDF 等形式，都不 care 浏览器的，没法执行 Javascript 画图命令的。那么问题来了，到底怎么能力实现 Echarts 图形的导出与打印呢？当当当当，润乾报表来了，用新版本间接搞定，而且还是那个白菜价哈，10000 一套！实现计划是这样滴：第一步：部署环境1，在服务器端装置 SlimerJS 和 Firefox。SlimerJS 是服务器端的 JavaScriptAPI 工具。也就是没有界面的可编程操作的浏览器。这样，润乾报表就能够用 Javascript脚本操纵网页，实现对页面图形的、网络监控等一系列操作了。因为 SlimerJS 基于火狐的 Gecko 内核，因而应用 SlimerJS 时还须要装置与它匹配的 FireFox 浏览器版本。而后在报表服务器端能够利用 SlimerJS 返回的 API 程序，把网页中画出的 Echarts 统计图转换成一张图片，而后加载到报表单元格里进行打印、导出。目前 SlimerJS 只能反对 Firefox 38-52 或者更低版本，所以不要下载安装 Firefox 最新版本。 SlimerJS 曾经被退出润乾报表安装包中，放在润乾报表【装置根目录】\report\web\webapps\demo\raqsoft\slimerjs-0.10.3.zip； ...

关于echarts:如何才能导出和打印-Echarts-图形

Echarts-x轴标题-斜体-显示多图表显示

怎么处理ECharts超长的标签文本

效果图：截取展示旋转角度展示 x轴标签文本过长，会导致显示不全。解决方案1（截取展示）：var options = { xAxis: { type: "category", data: [ "印度尼西亚", "马来西亚", "巴基斯坦", "斯洛文尼亚", "安哥拉", "澳大利亚", "哥斯达黎加", ], axisLabel: { formatter: function (value, index) { console.log(value, index); if (value.length > 3) { return value.slice(0, 3) + "..."; //标签截取 } return value; }, }, }, yAxis: {}, series: [ { type: "bar", barWidth: 30, data: [143, 185, 193, 143, 185, 193, 50], }, ],};var dom = document.getElementById("myCharts");var myChart = echarts.init(dom);myChart.setOption(options);解决方案2（旋转角度展示）：var options = { xAxis: { type: "category", data: [ "印度尼西亚", "马来西亚", "巴基斯坦", "斯洛文尼亚", "安哥拉", "澳大利亚", "哥斯达黎加", ], axisLabel: { rotate: -20, //标签旋转的角度 }, }, yAxis: {}, series: [ { type: "bar", barWidth: 30, data: [143, 185, 193, 143, 185, 193, 50], }, ],};var dom = document.getElementById("myCharts");var myChart = echarts.init(dom);myChart.setOption(options);示例代码下载可以复制以上代码运行查看使用效果，也可以到GitHub: https://github.com/Jackyyans/code123下载，更多示例将会持续更新，欢迎关注。 ...

echarts实现词云图表

前段时间在开发过程中用 echarts 开发了一些图表，当做到词云的时候发觉 echarts-wordcloud 插件的颜色配置项不生效。在网上查了不少资料，好多人说 echarts4 和 echarts-wordcloud 插件不兼容了，然后还提供了一些优雅降级方案，让 echarts3 和 echarts4 同时在项目里运行。但是后来我研究发现其实 echarts4 是可以完美兼容 echarts-wordcloud 的，只是网上提供的配置方法有问题而已。下载最新版本的 echarts 4.8.0 和 echarts-wordcloud 1.13 在 html 中创建一个渲染图表的 div ，引入插件和数据： <div id="chart" style="width: 600px;height: 600px;"></div><script src="echarts.js"></script><script src="echarts-wordcloud.js"></script><script src="data.js"></script>我的数据格式是： const originData = [ { name: '基因编辑', value: 1228 }, { name: '婴儿', value: 981 }, { name: '贺建奎', value: 363 }, ……]初始数据不用非要这种格式，只要最终格式化成这样就可以。声明一个可以创建随机颜色的函数，用来给词云加颜色： function randomColor() { return 'rgb(' + [ Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160) ].join(',') + ')'; }格式化数据： ...

全国经纬度json文件

echarts-百分比图

二次开发封装百度echarts 图表百分比图公司需求样式如下图：话不多说上代码： <template> <div ref="ringChart" class="ringChart"></div></template><script> import echarts from 'echarts' export default { name: "Ring", props: { //颜色 color: { type: String, default () { return 'red' } }, //数据 data: { type: Object, default () { return {} } } }, data () { return { } }, mounted(){ const option = { legend: { orient: 'vertical', left: 'center', top: '10%', selectedMode:false, icon:'none', formatter: [ `{a|${this.data.text}}{b|/${this.data.subtext}}`, ].join('\n'), textStyle: { rich: { a: { color: this.color, textShadowColor:this.color, textShadowBlur:2, fontSize: 14 }, b: { color: '#DCDCDC', fontSize: 12, }, } } }, title: { text: `${parseFloat(this.data.value)}%`, textStyle: { color: this.color, textShadowColor:this.color, textShadowBlur:2, fontSize: 22 }, left: 'center', top: '80%' }, angleAxis: { max: 100, show: false, }, radiusAxis: { type: 'category', show: true, axisLabel: { show: false, }, axisLine: { show: false, }, axisTick: { show: false }, }, polar: { radius: '75%', center: ['50%', '50%'], }, series: [{ type: 'bar', // 圆角 // roundCap: true, barWidth: 40, showBackground: true, backgroundStyle: { color: "rgba(219,219,219,0.3)" }, data: [parseFloat(this.data.value)], coordinateSystem: 'polar', name: `${parseFloat(this.data.value)}`, label: { show: true, }, itemStyle: { normal: { opacity: 1, color: this.color, } }, }], } const chartObj = echarts.init(this.$refs.ringChart); chartObj.setOption(option) } }</script><style lang="scss" scoped> .ringChart{ width: 100%; height: 100%; }</style>调用方法（注册组件我就不上代码了） ...

Echarts基础-pink老师

可视化面板介绍应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。 01-使用技术完成该项目需要具备以下知识： div + css 布局flex 布局Less原生js + jquery 使用rem适配echarts基础02- 案例适配方案设计稿是1920px flexible.js 把屏幕分为 24 等份cssrem 插件的基准值是 80px 插件-配置按钮---配置扩展设置--Root Font Size 里面设置。但是别忘记重启vscode软件保证生效 03-基础设置body 设置背景图，缩放为 100% ，行高1.15css初始化04-header 布局高度为100px背景图，在容器内显示缩放比例为 100%h1 标题部分白色 38像素居中显示行高为 80像素时间模块 showTime 定位右侧 right 为 30px 行高为 75px 文字颜色为：rgba(255, 255, 255, 0.7) 而文字大小为 20像素// 格式：当前时间：2020年3月17-0时54分14秒<script> var t = null; t = setTimeout(time, 1000);//開始运行 function time() { clearTimeout(t);//清除定时器 dt = new Date(); var y = dt.getFullYear(); var mt = dt.getMonth() + 1; var day = dt.getDate(); var h = dt.getHours();//获取时 var m = dt.getMinutes();//获取分 var s = dt.getSeconds();//获取秒 document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒"; t = setTimeout(time, 1000); //设定定时器，循环运行 } </script>header部分css样式header { position: relative; height: 1.25rem; background: url(../images/head_bg.png) no-repeat top center; background-size: 100% 100%; h1 { font-size: 0.475rem; color: #fff; text-align: center; line-height: 1rem; } .showTime { position: absolute; top: 0; right: 0.375rem; line-height: 0.9375rem; font-size: 0.25rem; color: rgba(255, 255, 255, 0.7); }}05-mainbox 主体模块需要一个上左右的10px 的内边距column 列容器，分三列，占比 3：5：3css样式： ...

echarts属性设置大全

// 全图默认背景 // backgroundColor: ‘rgba(0,0,0,0)’, // 默认色板 color: [`'#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed'`, '#ff69b4'`,'#ba55d3','#cd5c5c','#ffa500','#40e0d0',` '#1e90ff'`,'#ff6347','#7b68ee','#00fa9a','#ffd700',` '#6699FF'`,'#ff6666','#3cb371','#b8860b','#30e0e0'],` // 图表标题 title: { x: 'left'`, // 水平安放位置，默认为左对齐，可选为：` // 'center' ¦ 'left' ¦ 'right' // ¦ {number}（x坐标，单位px） y: 'top'`, // 垂直安放位置，默认为全图顶端，可选为：` // 'top' ¦ 'bottom' ¦ 'center' // ¦ {number}（y坐标，单位px） //textAlign: null // 水平对齐方式，默认根据x设置自动调整 backgroundColor: 'rgba(0,0,0,0)'`,` borderColor: '#ccc'`, // 标题边框颜色` borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框） padding: 5, // 标题内边距，单位px，默认各方向内边距为5， // 接受数组分别设定上右下左边距，同css itemGap: 10, // 主副标题纵向间隔，单位px，默认为10， ...

echarts-自定义legend

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>ECharts</title>  <script src="https://www.echartsjs.com/examples/vendors/echarts/echarts.min.js"></script> </head> <body> <div style="position: relative; width: 600px;height:400px;">  <div style="position: absolute; left: 50%; transform: translateX(-50%);z-index: 10;"> <button style="height: 28px;" onclick="onLegendClick('邮件营销')" > 邮件营销 </button> <button style="height: 28px;" onclick="onLegendClick('联盟广告')" > 联盟广告 </button> </div> <div id="main" style="width: 100%;height: 100%"></div> </div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById("main")); // 指定图表的配置项和数据 var option = { title: { text: "折线图堆叠" }, tooltip: { trigger: "axis" }, legend: { show: false, }, grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true }, xAxis: { type: "category", boundaryGap: false, data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] }, yAxis: { type: "value" }, series: [ { name: "邮件营销", type: "line", stack: "总量", data: [120, 132, 101, 134, 90, 230, 210] }, { name: "联盟广告", type: "line", stack: "总量", data: [220, 182, 191, 234, 290, 330, 310] }, { name: "视频广告", type: "line", stack: "总量", data: [150, 232, 201, 154, 190, 330, 410] }, { name: "直接访问", type: "line", stack: "总量", data: [320, 332, 301, 334, 390, 330, 320] }, { name: "搜索引擎", type: "line", stack: "总量", data: [820, 932, 901, 934, 1290, 1330, 1320] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); var onLegendClick = function(name) { myChart.dispatchAction({ type: "legendToggleSelect", // 图例名称 name: name, }); }; </script> </body></html>

关于echarts图表根据父元素宽度进行自适应

有时候echarts设置了图表后，放大浏览器和缩小浏览器，父元素会跟着浏览器大小进行放大和缩小，而图表不会跟着父元素大小进行变化，这时候我们可以设置echarts对象，让他可以实现这样的效果。官方文档如下： ECharts没有绑定resize事件，显示区域大小发生改变内部并不知道，使用方可以根据自己的需求绑定关心的事件，主动调用resize达到自适应的效果，常见如window.onresize = myChart.resize。注意：如果这个页面有多个图表：//多图表自适应window.addEventListener("resize", function () {myChart.resize();myChart2.resize();});

关于使用ECharts一些基础

前言ECharts 一个使用 JavaScript 实现的开源可视化库, 在前端我们可以使用这个库绘制各种可视化图表。我们需要掌握一些基本的数据知识，这些基本的数据知识能够帮助我们更好的理解和使用ECharts 函数不管你是高中还是大学毕业，对于数学中的函数，应该都是很熟悉的。所谓的函数其实就是一种映射关系，x通过一定的转换规则f得到y。其中一个函数包含三个要素定义域X、值域Y和对应法则f，我们可使用下面的方式来表示 y = f(x) 其中 , 拿数据可视化来说，我们是不能把数据原封不动的变成图形展示给用户查看。比如一个数据是10000, 难道我们需要在页面上定义10000px的像素的图形给用户么。很明显我们不能这样做。我们需要把这个 10000 进行一系列的转化，变成100px或者10px或者其他高度。在可视化中，我们追求的不是一个绝对的，而是一个相对的。像这样： A的数值是100，B的数值是200。现在需要绘制这两个数据的柱状图，我们只需要很明显的告诉我们的用户，B的高度是A的两倍即可。而其中A绘制的高度是否为100px，不是我们需要关心的事情。而函数就是我们对数据进行转换的一个利器，能够帮助我们把数据相对的转化为页面展示的图形数据类型在数据可视化中, 数据可以分为连续型与离散型两种类型我们怎么去理解这两个数据类型呢。举个例子, 现在我们有某个商品一周的销售额日期MonTueWedThuFriSatSun销售额820932901934129013301320上面我们看日期这个维度下面，周一，周二，周三，周四...... 是个整数的单位(天)，我们无法继续往下划分。有人会有疑惑，一天怎么会分不下去呢，一天会有24个小时，一个小时会有60分钟，分钟到秒，秒到毫秒...... 明明可以无限分下去。这样说是可以分下去，但是它的维度就不是日期了，而是时刻了。在日期的维度下，最小的整数单位就是天，每一天当做一个离散数据点，这种可以理解为离散型。继续看我们的表格，在每一个日期的下面，有它所对应的销售额。比如周一的销售额是820，周二的销售额是932, 周三的销售额就是901。这些数据我们无法确定的它的最小维度是多少。它们是存在一个区间中，比如上面的销售额。我们可以理解为[0, +无穷)。它可以落在这个范围内的任何地方。这种可以认为是连续型。拿echart中最基本的折线图来看：其中数据的销售额是连续型，从[0-1500]中，我们从里面找到任意一个数据，都能映射到Y轴一个对应的高度。，并且这个高度是唯一的。我们把其中的销售额作为x, 高度作为y，那么函数就是 y = x * k + d 其中x的定义域就是[0, 1500], y的值域就是[0, 图表的高度]。我们已经知道其中的两个点，K 和 d 就能够算出来。于是，通过上面的函数就能计算出任意一点的高度。 X轴的日期就是离散型。总共只有7个点，把X轴分层7个等份，Mon获取第一等份，Tue获取第二等份，以此类推......

vue里面使用Echarts

Echartsmain.js 注册全局echarts // echartsimport echarts from './core/echarts'Vue.prototype.$echarts = echartscore/echarts.js echarts按需引入 // 引入基本模板let echarts = require('echarts/lib/echarts')// 引入柱状图组件require('echarts/lib/chart/bar')// 引入饼图组件require('echarts/lib/chart/pie')// 引入提示框和title组件require('echarts/lib/component/tooltip')require('echarts/lib/component/title')export default echartsuse.vue 使用echarts实例 <template> <div id="myChart" class="myChart" :style="{width: '300px', height: '150px', margin: '0 auto'}"></div></template><script>export default { data:{ return { pie: { tooltip: { // 图例的 tooltip 配置，配置项同 legend.tooltip。默认不显示，可以在 legend 文字很多的时候对文字做裁剪并且开启 tooltip trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, itemWidth: '10', // 图例标记的图形宽度 textStyle:{}, legend: { // 图例 orient: 'vertical', x: 'right', icon: 'round', // 和data里面的icon类型，设置的是所有icon data: [{ // 图例的数据可以是对象或者字符串类型 name:'直接访问', // 图例项的名称，应等于某系列的name值（如果是饼图，也可以是饼图单个数据的 name） // 强制设置图形为圆。 icon: 'circle', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none' // 设置文本为红色 textStyle: { // 图例项的文本样式。 color: 'red' } }, '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, series: [ { name: '访问来源', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, textStyle: { fontSize: '15', fontWeight: 'bold' } } }, labelLine: { normal: { show: false } }, data: [ { value: 335, name: '直接访问' }, { value: 310, name: '邮件营销' }, { value: 234, name: '联盟广告' }, { value: 135, name: '视频广告' }, { value: 1548, name: '搜索引擎' } ] } ] } } }, methods: { drawLine () { // 基于准备好的dom，初始化echarts实例 let myChart = this.$echarts.init(document.getElementById('myChart')) // 绘制图表 myChart.setOption(this.pie) }, }, mounted () { // 注意，必须mounted后绘制 this.drawLine() },}

React-封装-Echarts-公共组件

前序LZ 之前工作一直在用 Vue,但最近听说 Vue 新版也要 All IN JS，所以想着干脆换到 React 算了，所以目前在学习 React + TS + Hook，顺手拿了一个老项目重构，今天主要讲 React 封装 Echarts 公共组件, 因为第一次正式搞，所以本文中如果有 React 代码哪里不规范还请大佬们批评指正哈！目录：需求分析技术评估实现思路测试优化总结分享1. 需求分析ECharts 图表要用到很多，所以要将公共部分抽取成组件减少重复代码ECharts 是需要操作到真实dom的第三方库，和MVVM框架一起使用需要做一些特殊处理Vue项目中使用的Vue-ECharts，组件自动去处理实例挂、数据更新等React也有echarts-for-react等优秀的开源组件，但为了学习和更舒适的使用，我们需要自己去造新的轮子参考资料：【开源】echarts-for-react： https://hellohy.github.io/pos...【开源】vue-echarts: https://github.com/ecomfe/vue...【文章】如何在react中封装echarts ：https://hellohy.github.io/pos...2. 技术评估我们需要用到四个东西： ReactReact HookEchartsTypeScript3. 实现思路1) 一个组件需要的参数配置 ChartProps参数值描述必填keystring用于保持多图表时每一个图表的独立性是optionobject 或者 nullEcharts 配置参数是style { width: string, height: string }用于保持多图表时每一个图表的独立性是classNamestring组件样式类 className否onRenderonRender?(instance): void;渲染时回调函数，返回图表示例否2) 参数类型检查接口 interfaceinterface ChartProps { key: string; option: object | null; style: { width: string; height: string; }; className?: string; onRender?(instance): void;}3) 基础组件 Chart.tsximport * as React from "react";import echarts from "echarts";const Chart = (props: ChartProps): React.ReactElement => { // 挂载节点 let chartDom = null; // 元素挂载到浏览器事件 const refOnRender = (el): void => chartDom = el; // 返回组件 return React.createElement("div", { ref: refOnRender, style: props.style, className: props.className });};export default Chart;4) 当组件挂载到真实DOM，初始化Echarts实例,使用Hook// 生命钩子函数type Callback = () => void;React.useEffect((): Callback => { // 加载状态 function showLoading(instance): void { instance.showLoading("default", { text: "", color: "#c23531", textColor: "#000000", maskColor: "rgba(255, 255, 255, 0.8)", zlevel: 0 }); } // 获取实例对象 let instance = echarts.getInstanceByDom(chartDom) || echarts.init(chartDom); // 默认加载状态 showLoading(instance); // 如果存在参数，渲染图表 if (props.option) { // 关闭加载状态 if (instance) instance.hideLoading(); // 渲染图表 instance.setOption(props.option); } }, [props.option]);5）浏览器窗口大小变化时图表大小自适应重绘// 大小自适应const resize = (): void => instance.resize();window.removeEventListener("resize", resize);window.addEventListener("resize", resize);6) 给图表加动画需要图表实例，设置回调函数将图表实例返回 ...

Echarts的自定义系列

自定义系列（custom series），是一种系列的类型。它把绘制图形元素这一步留给开发者去做，从而开发者能在坐标系中自由绘制出自己需要的图表。利用好自定义系列，你会觉得Echarts无所不能了。简介自定义系列主要是靠renderItem函数来实现，如下： var option = { ..., series: [{ type: 'custom', renderItem: function (params, api) { // ... }, data: data }]}这个 renderItem 函数的职责，就是返回一个（或者一组）图形元素定义，图形元素定义中包括图形元素的类型、位置、尺寸、样式等。echarts 会根据这些图形元素定义来渲染出图形元素。 var option = { ..., series: [{ type: 'custom', renderItem: function (params, api) { // 对于 data 中的每个 dataItem，都会调用这个 renderItem 函数。 // （但是注意，并不一定是按照 data 的顺序调用） // 这里进行一些处理，例如，坐标转换。 // 这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。 var categoryIndex = api.value(0); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。 var startPoint = api.coord([api.value(1), categoryIndex]); var endPoint = api.coord([api.value(2), categoryIndex]); // 这里使用 api.size(...) 获得 Y 轴上数值范围为 1 的一段所对应的像素长度。 var height = api.size([0, 1])[1] * 0.6; // shape 属性描述了这个矩形的像素位置和大小。 // 其中特殊得用到了 echarts.graphic.clipRectByRect，意思是， // 如果矩形超出了当前坐标系的包围盒，则剪裁这个矩形。 // 如果矩形完全被剪掉，会返回 undefined.var rectShape = echarts.graphic.clipRectByRect({ // 矩形的位置和大小。 x: startPoint[0], y: startPoint[1] - height / 2, width: endPoint[0] - startPoint[0], height: height }, { // 当前坐标系的包围盒。 x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height }); // 这里返回为这个 dataItem 构建的图形元素定义。 return rectShape && { // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。 type: 'rect', shape: rectShape, // 用 api.style(...) 得到默认的样式设置。这个样式设置包含了 // option 中 itemStyle 的配置和视觉映射得到的颜色。 style: api.style() }; }, data: [ [12, 44, 55, 60], // 这是第一个 dataItem [53, 31, 21, 56], // 这是第二个 dataItem [71, 33, 10, 20], // 这是第三个 dataItem ... ] }]}renderItem 函数提供了两个参数：params：包含了当前数据信息（如 seriesIndex、dataIndex 等等）和坐标系的信息（如坐标系包围盒的位置和尺寸）。api：是一些开发者可调用的方法集合（如 api.value()、api.coord()）。 ...

Echarts-graphic原生图形元素组件

前面的文章介绍了Echarts通用配置项，这篇文章进入第二个主题介绍：Echarts graphic原生图形元素组件。 graphic 是原生图形元素组件。可以支持的图形元素包括：Image, Text, Circle, Sector, Ring, Rect, Polygon, Polyline, Line, BezierCurve, Arc, Group 。这篇文章分别介绍graphic的通用设置，以及通用事件，接下来会分别介绍每种图形的绘制方法。一、graphic的通用配置{ // id 用于在更新图形元素时指定更新哪个图形元素，如果不需要用可以忽略。 id: 'xxx', // 这个字段在第一次设置时不能忽略，取值见上方『支持的图形元素』。 type: 'image', // 下面的各个属性如果不需要设置都可以忽略，忽略则取默认值。 // 指定本次 setOption 对此图形元素进行的操作。默认是 'merge'，还可以 'replace' 或 'remove'。 $action: 'replace', // 这是四个相对于父元素的定位属性，每个属性可取『像素值』或者『百分比』或者 'center'/'middle'。 left: 10, // right: 10, top: 'center', // bottom: '10%', shape: { // 定位、形状相关的设置，如 x, y, cx, cy, width, height, r, points 等。 // 注意，如果设置了 left/right/top/bottom，这里的定位用的 x/y/cx/cy 会失效。 }, style: { // 样式相关的设置，如 fill, stroke, lineWidth, shadowBlur 等。 }, // 表示 z 高度，从而指定了图形元素的覆盖关系。 z: 10, // 表示不响应事件。 silent: true, // 表示节点不显示 invisible: false, // 设置是否整体限制在父节点范围内。可选值：'raw', 'all'。 bouding: 'raw', // 是否可以被拖拽。 draggable: false, // 事件的监听器，还可以是 onmousemove, ondrag 等。支持的事件参见下。 onclick: function () {...}}二、graphic的通用事件支持这些事件配置： onclick, onmouseover, onmouseout, onmousemove, onmousewheel, onmousedown, onmouseup, ondrag, ondragstart, ondragend, ondragenter, ondragleave, ondragover, ondrop ...

echarts大屏字体自适应

用echarts做大屏可视化的时候会遇到不是用电脑投屏而是直接在大屏打开的情况，这时候大屏幕下固定的px为单位的字体就会显得很小。有一种解决方法就是采用rem为单位，根据屏幕的宽度调整html的font-size. 获取屏幕宽度并计算比例function fontSize(res){ let docEl = document.documentElement, clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth; if (!clientWidth) return; let fontSize = 100 * (clientWidth / 1920); return res*fontSize;}在需要设置字体的地方可以这样写，如在1920屏宽下字体设置为12px,就可以传入0.12给fontSize fontSize(0.12) tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' }, textStyle:{ fontSize: fontSize(0.12), } },

echart-K线-自定义-tooltip-鼠标悬停显示数据详情

echart K线自定义 tooltip 鼠标悬停显示数据详情以 axis 触发时tooltip 中的 params 数据结构如下：根据这个来写 tooltip 就好了。 tooltip: { axisPointer: { type: 'cross' }, trigger: 'axis', formatter: function (params) { params = params[0]; let currentItemData = params.data; return params.name + '<br>' + '开盘:' + currentItemData[1] + '<br>' + '收盘:' + currentItemData[2] + '<br>' + '最低:' + currentItemData[3] + '<br>' + '最高:' + currentItemData[4] }}以 item 触发时tooltip 中的 formatter 接收的参数 params 中的 value值是 [序号, 开盘, 收盘, 最低, 最高] 数组 ...

Echarts-通用配置项

这篇文章会首先介绍使用echarts的最简单的例子，然后介绍一些通用的配置项。后面会拿几篇文章专门讲解echarts的graphic, 以及echarts的自定义系列，掌握了echarts的自定义系列的用法，那绘制任何图形都不在话下。除了普通的渲染，还有一些交互行为，比如拖动等等，后面也会介绍。所以主要包含几个方面：1、echarts的通用配置项 2、echarts的graphic 3、echarts的自定义系列 4、echarts的交互首页进入第一块内容，echarts的通用配置项。我们来看看官网的第一的例子： <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>ECharts</title>  <script src="echarts.min.js"></script></head><body>  <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script></body></html>通用的配置项可以查看官网的配置项手册：https://echarts.baidu.com/opt...这里只介绍几种通用的配置，比如grid, xAxis的配置 , yAxis的配置, DataZoom的配置以及Echarts拖动。 ...

关于ECharts折线图非节点的点击事件

ECharts官网教程详情请看官网教程前言：相信很多人有这种需求，在点击折线图非节点的时候不能触发点击事件，而官网又没有这方面的教程，只能自己默默的研究了解决方案如下: // 基于准备好的dom，初始化echarts实例 var mychart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 mychart.setOption(option); //绑定点击事件 mychart.getZr().on("click", function(params) { const pointInPixel = [params.offsetX, params.offsetY]; if (mychart.containPixel("grid", pointInPixel)) { let xIndex = mychart.convertFromPixel({ seriesIndex: 0 }, [ params.offsetX, params.offsetY ])[0]; /*事件处理代码书写位置*/ } });实现的代码解释如下： ...

echarts-dataView数据对齐

因为横坐标日期太长了导致标题（销售量订单数）和数据没有对齐，官方手册dataView有个optionToContent属性可以修改成表格，比如效果这样：代码： dataView : { show: true, readOnly: true, optionToContent: function(opt) { var axisData = opt.xAxis[0].data; var series = opt.series; var table = '<table class="layui-table" style="width:100%;text-align:center"><tbody><tr>' + '<td>时间</td>' + '<td>' + series[0].name + '</td>' + '<td>' + series[1].name + '</td>' + '</tr>'; for (var i = 0, l = axisData.length; i < l; i++) { table += '<tr>' + '<td>' + axisData[i] + '</td>' + '<td>' + series[0].data[i] + '</td>' + '<td>' + series[1].data[i] + '</td>' + '</tr>'; } table += '</tbody></table>'; return table; }}但是有个不方便的地方，表格不能选中数据复制（为了方便得到数据，到Excel中去制作图表），不想因为好看放弃实用然后就想到再做个下载表格功能。找个一个教程，要修改源码，改不来，需要高大上的朋友可以参考 ...

初步接触echarts

安装和使用npm install echarts --saveconst echarts = require("echarts")require("echarts/map/js/china") // geo map是china时require("echarts/extension/bmap/bmap") // 很关键使用geo 出现地图的 let myChart = echarts.init(document.getElementById("j_map"));...

地图三级下钻demo下钻省市县

利用echarts实现的地图下钻功能，悬浮显示tooltip信息效果图代码地址地图三级下钻demo的GitHub地址代码详解 <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>地图下钻</title> <meta http-equiv="X-UA-Compatible" content="IE=100" /> <style> body { margin: 0; padding: 0; background-color: #333; } </style> </head> <body>  <div id="map" style="height: 600px;width: 800px"></div> <script src="./js/jquery-1.11.2.min.js"></script>  <script src="./js/cityMap.js"></script> <script src="./js/echarts.min.js"></script> <script src="./js/app.js"></script> </body></html>//地图容器var chart = echarts.init(document.getElementById("map"));//34个省、市、自治区的名字拼音映射数组var provinces = { //23个省台湾: "taiwan", 河北: "hebei", 山西: "shanxi", 辽宁: "liaoning", 吉林: "jilin", 黑龙江: "heilongjiang", 江苏: "jiangsu", 浙江: "zhejiang", 安徽: "anhui", 福建: "fujian", 江西: "jiangxi", 山东: "shandong", 河南: "henan", 湖北: "hubei", 湖南: "hunan", 广东: "guangdong", 海南: "hainan", 四川: "sichuan", 贵州: "guizhou", 云南: "yunnan", 陕西: "shanxi1", 甘肃: "gansu", 青海: "qinghai", //5个自治区新疆: "xinjiang", 广西: "guangxi", 内蒙古: "neimenggu", 宁夏: "ningxia", 西藏: "xizang", //4个直辖市北京: "beijing", 天津: "tianjin", 上海: "shanghai", 重庆: "chongqing", //2个特别行政区香港: "xianggang", 澳门: "aomen"};//直辖市和特别行政区-只有二级地图，没有三级地图var special = ["北京", "天津", "上海", "重庆", "香港", "澳门"];//绘制全国地图$.getJSON("./json/china.json", function(data) { console.log("加载全国地图执行了"); //注册地图 echarts.registerMap("中国", data); var d = []; for (var i = 0; i < data.features.length; i++) { d.push({ name: data.features[i].properties.name }); } //绘制地图 renderMap("中国", d);});//地图点击事件chart.on("click", function(params) { //点击事件输出获取到的数据 //如果点击的这个地方的name省份的列表中，绘制二级地图 if (params.name in provinces) { //如果点击的是34个省、市、自治区，绘制选中地区的二级地图 //json的路径进行拼接 console.log("第一级下钻到第二级"); $.getJSON("./json/province/" + provinces[params.name] + ".json", function( data ) { echarts.registerMap(params.name, data); var d = []; for (var i = 0; i < data.features.length; i++) { d.push({ name: data.features[i].properties.name }); } renderMap(params.name, d); }); } else if (params.seriesName in provinces) { //如果是【直辖市/特别行政区】只有二级下钻 if (special.indexOf(params.seriesName) >= 0) { renderMap("中国"); } else { //排除直接点击省份，和特殊地区这两种情况，点击的事件就是点击了二级地图 //显示县级地图 console.log("第二级下钻到第三级"); $.getJSON("./json/city/" + cityMap[params.name] + ".json", function( data ) { echarts.registerMap(params.name, data); var d = []; for (var i = 0; i < data.features.length; i++) { d.push({ name: data.features[i].properties.name }); } renderMap(params.name, d); }); } } else { //排除上面的三种情况，到达三级地图之后，再点击就是重绘全国地图 $.getJSON("./json/china.json", function(data) { console.log("加载全国地图执行了"); //注册地图 echarts.registerMap("中国", data); var d = []; for (var i = 0; i < data.features.length; i++) { d.push({ name: data.features[i].properties.name }); } //绘制地图 renderMap("中国", d); }); }});//初始化绘制全国地图配置var option = { // backgroundColor: '#091C3D', tooltip: { trigger: "item", formatter: function(d) { return d.name + "</br>数据1：" + 9.1 + "</br>数据2：" + 1.9 + "</br>"; } }};function renderMap(map, data) { //数组，name为地区名称，value为值 option.title = { text: map, textStyle: { color: "#fff", fontSize: 30 }, left: 300, top: 50 }; option.series = [ { z: 1, name: map, type: "map", map: map, right: "2%", top: 10, height: "98%", width: "98%", zoom: 1, label: { normal: { show: true, textStyle: { color: "#fff", fontSize: 12 } }, emphasis: { show: true, textStyle: { color: "#fff", fontSize: 16 } } }, itemStyle: { normal: { areaColor: "#323c48", borderColor: "dodgerblue", borderWidth: 2, shadowColor: "rgba(63, 218, 255, 0.5)", shadowBlur: 20 }, emphasis: { areaColor: "#CBAAAA" } }, //roam: true, data: data } ]; //渲染地图 chart.setOption(option);}

echarts-缩放功能

option[8] = { // Make gradient line here visualMap: [{ show: false, type: 'continuous', seriesIndex: 0, dimension: 0, min: 0, max: xData.length - 1 }], title: [{ top: '', left: 'center', text: param.title }], dataZoom: [ // 主要是这一部分，他是折线图的缩放功能的开启 { startValue:startValue, // 起始位置 }, { type: 'inside', } ], tooltip: { trigger: 'axis', formatter: function(params){ var text_Unit =''; for(var i = 0;i < params.length;i++){ text_Unit += params[i].value + param.Unit + "</br>" } return params[0].name + "</br>" + text_Unit; } }, xAxis: [{ data: xData, gridIndex: 1, }], yAxis: [{ name: param.yName, splitLine: { show: false }, gridIndex: 1, }], grid: [{ bottom: '', }, { top: '20%', }], series: [{ type: 'line', showSymbol: false, data: data }]

echarts多条折线图动态分层

echarts的折线图动态分层

在vue2中使用echarts-VueECharts插件

Vue-EChartsECharts 的 Vue.js 组件。基于 ECharts v4.1.0+ 开发，依赖 Vue.js v2.2.6+。安装npm（推荐方式）$ npm install echarts vue-echartsCDN在 HTML 文件按如下方式依次引入 echarts 和 vue-echarts： <script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.js"></script><script src="https://cdn.jsdelivr.net/npm/vue-echarts@4.0.2"></script>使用方法用 npm 与 Vue Loader 基于 ES Module 引入（推荐用法）import Vue from 'vue'import ECharts from 'vue-echarts' // 在 webpack 环境下指向 components/ECharts.vue// 手动引入 ECharts 各模块来减小打包体积import 'echarts/lib/chart/bar'import 'echarts/lib/component/tooltip'// 如果需要配合 ECharts 扩展使用，只需要直接引入扩展包即可// 以 ECharts-GL 为例：// 需要安装依赖：npm install --save echarts-gl，并添加如下引用import 'echarts-gl'// 注册组件后即可使用Vue.component('v-chart', ECharts)⚠️ 注意事项引入源码版本Vue-ECharts 默认在 webpack 环境下会引入未编译的源码版本，如果你正在使用官方的 Vue CLI 来创建项目，可能会遇到默认配置把 node_modules 中的文件排除在 Babel 转译范围以外的问题。请按如下方法修改配置： ...

echarts-表格自适应需要注意的问题

最近在做大屏可视化，页面数据展示基本都是用百度的echarts,因为页面要做自适应，所以当视窗变化的时候echarts也要变化。window.onresize 可以解决这个问题。而一般一个页面不可能只引用一个表格，当你引用多个的时候，有些地方需要注意。只能有一个window.onresize 方法，不能一个表格放一个window.onresize，否则只有最后一个才有resize起作用。window.onresize = function () { //做图标自适应的时候要注意，所有图标只能放一个onresize方法，否则后面的onresize会覆盖前面的onresize ChartBar.resize(); ChartAP.resize(); ChartPie.resize(); ChartPie2.resize(); ChartPie1.resize();};

There-is-a-chart-instance-already-initialized-on-the-dom

在用echart做表格自适应的时候，每次 resize 都会出现echart警告，虽然不影响echart的展示。解决方法：全局声明变量，在echart方法外面。注意！是外面，在方法里声明没效果。 var ChartAP;function chartIndex() { if ( ChartAP != null && ChartAP != "" && ChartAP != undefined ) { ChartAP.dispose(); } ChartAP = echarts.init(document.getElementById('wirelessAP')); var optionAP = {}; ChartAP.setOption(optionAP);}

vue全家桶Echarts百度地图搭建数据可视化系统

本文章篇幅略长，内容有点多大佬可根据目录选择性查阅新人可一步步来阅读1 前言1.1 业务场景突然接到产品说要做一个数据监控的系统。有线图、柱状图、地图，类似于数据可视化的方式。本人之前从未接触过Echarts，然后需要2周拿出成果，有点慌???????? 1.2 业务分析拿到需求看了一下支持用户名、密码登录，默认显示一个维度数据，然后点击可钻取进入第二维度数据，再点击进入第三维度数据展示。大致估摸着。。。系统搭建vue-clivuex记录登录信息vue-router路由跳转3个维度的页面，提取出共用的组件各个组件开发调节样式，增加UI加入后台接口数据优化显示测试上线当然这不是要2周内，全做完。应该是完成步骤6。相对于公司就我一个前端，没接触过Echarts，有问题都没人讨论的情况下。。。心里还是忍不住想吐槽一下???????????? 1.3 效果展示这里列出了第一维度页面的样式。文字请无视，哈哈。 2 系统安装吐槽归吐槽，活还是要干的。????因为本人最熟悉的还是vue，所以还是选择了用vue全家桶来做。这部分可参考 vue build 2.1 安装node环境下载安装node环境，直接去官网下载即可 node.js安装完后可在命令行运行node -v npm -v 查看是否安装成功以及版本2.2 安装Vue项目2.2.1 安装vue官方文档：vuejs 这里我们使用npm的方式 npm i vue2.2.2 安装Vue CLI官方文档：vue CLI npm i -g @vue/cli安装之后，你就可以在命令行中访问 vue 命令。你可以用这个命令来查看其版本。vue -V2.2.3 创建项目这里安装的时候，注意将我们要使用的安装上。vuex、vue-router，其他可根据需要添加。方法一vue create hello-world这里参照官方网站，有很详细的介绍。参照：vue create方法二使用图形化界面 vue ui界面含中文，很好操作。参照：vue ui2.2.4 安装插件方法一最直接也是推荐的 npm i xxx 这里介绍一下 -S -D -g 的区别 npm i -S xxx 文件写入dependencies，用于工程中开发时使用到的插件，会发布到生产环境如UI，JS等。npm i -D xxx 文件写入devDependencies，用于工程支持类插件，不会发布到生产环境，如gulp等压缩打包工具。npm i -g xxx 全局安装，如vue、ncu等。安装目录为：C:Users用户AppDataRoamingnpm方法二vue ui图像化界面中包含了若干插件，可点击安装，但不一定是最新版本。 ...

（小小黑科技）vue+echarts实现半圆图表

如何用echarts实现半圆图表？在echarts官方实例倒腾一波，发现官方并没有提供半圆图表的写法，那怎么办呢？官方没提供，但需求还是要实现的。半圆图表其实就是饼图的一半，那么简单的思路如下：设置一个sum值，用来累计所有要展示的数据的总和，再添加到数据里面，那么整个饼图就可以分成均匀的两半，然后将sum值的数据在饼图里面隐藏，就只剩下半圆。下面上代码：安装echartsnpm install echarts –save全局引入、配置// main.js 文件import echarts from ’echarts’Vue.prototype.$echarts = echarts 全局引入echarts，文件会比较大，我们实现半圆其实只需要饼图，那么建议还是按需引入// MyChart.vueimport echarts from ’echarts’// 引入饼图require(’echarts/lib/chart/pie’)// 引入提示框等组件require(’echarts/lib/component/tooltip’)require(’echarts/lib/component/title’)创建容器// MyChart.vue <div id=“myChart” style=“width: 400px;height: 400px;"></div>初始化容器let pieChart = echarts.init(document.getElementById(‘myChart’))// 初始化数据let data = [{name: ‘游泳健身’, value: 1024}, {name: ‘学车考驾照’, value: 2048}]let sum = 0// 放置需要显示的图例(if you need)let legendData = []// 循环数据累计sum值data.forEach(item => { sum += item.value * 1 // *1保证sum值为数值 legendData.push(item.name)})// 给数据加上总数sum 通过颜色及透明度设置不显示data.push({name: ‘总数’, value: sum, itemStyle: {normal: {color: ‘rgba(0, 0, 0, 0)’}}})// 下面给图例加上配置都是官方的apipieChart.setOption({ tooltip: { trigger: ‘item’, // formatter: ‘{a}<br/>{b}:{c}({d}%)’ formatter: ‘{b}:{c}({d}%)’ }, legend: { orient: ‘horizontal’, // vertical 设置图例展示方向 data: legendData }, series: [ { name: ‘随意啦’, // 上面formatter的a，不显示a可不设置 type: ‘pie’, startAngle: 180, // 重点！这里设置饼图从180°初渲染，刚好从上下将饼图平分成两部分 radius: [‘50%’, ‘60%’], center: [‘50%’, ‘60%’], data: data, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 10, shadowColor: ‘rgba(0, 0, 0, 0.5)’ } } } ]})配置完毕，来对比一下：配置之前（环形）：配置之后：哈哈，半圆就已经出来了，但是不是已经完美了呢？我们把鼠标覆盖上其中一个数据试试：吃惊！果然有问题，这里因为我们给数据加上了一条{name: ‘总数’, value: sum}这样总的数据，所以图表统计的时候，其它数据占比就是原来比例的50%！那要怎么处理呢？formatter了解一下。将原来的formatter改造：// 原先的formatterformatter: ‘{b}:{c}({d}%)’// 改造formatterformatter: function (param) { let str = ’’ let c = (param[‘value’] / sum) * 100 // 算出百分比 c = c.toFixed(2) str = str + c + ‘%’ return str}看下效果图：nice！改造成功。但这里还有一个小小的问题，那就是把鼠标覆盖上被隐藏那部分圆形的时候，还是会有提示显示：这里的一个处理就是，当我们在添加最后这一条总数据的时候，把它的tooltip设置为空就行了data.push({name: ‘总数’, value: sum, tooltip: {formatter: () => ‘’}, itemStyle: {normal: {color: ‘rgba(0, 0, 0, 0)’}}})最后，该渲染方法应该放在vue的mounted生命周期里，当dom渲染后再初始化容器mounted () { this.drawPie()},methods: { drawPie () { … }}OK，这样就大功告成了！吐槽：晚上改完的图表，隔天早上领导就说还是换回环形图展示吧(・｀´・) ...

react-echarts实现地图放大显示细节

效果预览思路需求：根据需求，放大地图至某个阈值，切换详细地图（简要地图和详细地图之间的切换）。需求–>技术：开启放大/缩小地图：roam:true;切换地图：（1）地图缩放事件：on(‘georoam’,handler)；（2）获取当前地图的zoom值：chartInstance.getOption().geo[0]；（3）与阈值比较后切换json重新注册地图：echarts.registerMap(‘XC’, another_json);代码实现import echarts from ’echarts/lib/echarts’;import ’echarts/lib/chart/map’;/geojson文件很大，生产环境中，应该放在public文件夹中，并异步加载/import { geoJson } from ‘./regionJsonXc’;import { sqJson } from ‘./regionJsonXc’;let defaultBlue = ‘#25ade6’;let darkBlue = ‘#186396’; //详细地图，线条颜色暗一些// 配置option，一定要查看echarts官方配置文档let option = { // 地图配置 geo: { show: true, map: ‘XC’, label: { normal: { show: true, color: ‘#ccc’, fontSize: 14, }, emphasis: { show: true, color: ‘#fff’ } }, roam: true, // 滚轮滚动–放大或缩小 itemStyle: { normal: { label: { show: true, color: ‘#fff’, fontSize: 14, }, areaColor: ‘rgba(24,99,150,0.05)’, borderColor: #186396, shadowColor: #186396, shadowBlur: 10, }, emphasis: { label: { show: false, color: ‘#fff’, shadowColor: ‘#25ade6’, shadowBlur: 10, }, areaColor: ‘rgba(24,99,150,0.5)’, }, }, zoom: 1 }, series: []};let myChart = null;class XcMap extends Component { state = { option: option, detail: false, // 是否使用详细地图 curMap:geoJson, } componentDidMount() { this.draw(geoJson); } drawMap = (json) => { const { option } = this.state; let echartElement = document.getElementById(‘xc-map’); myChart = echarts.init(echartElement); echarts.registerMap(‘XC’, json); myChart.setOption(option, true); myChart.on(‘georoam’, this.onDatazoom); // 缩放监听事件 } /* 获取zoom和center zoom:地图缩放值， center:中心位置，地图拖动之后会改变 / getZoom = () => { if(myChart){ let { zoom, center } = myChart.getOption().geo[0]; return { zoom, center } } return; } / 保存缩放值和中心位置， / saveZoom = () => { let { zoom, center } = this.getZoom(); const { option } = this.state; option.geo.zoom = zoom; option.geo.center = center; this.setState({option}); } /* * 地图缩小/放大 */ onDatazoom = () => { const { detail, option } = this.state; const { zoom } = this.getZoom(); const threshold = 1.7; this.saveZoom(); // 地图缩放后，将缩放值和center保存在状态中 if (zoom >= threshold && !detail) { // 切换详细地图 option.geo.itemStyle.normal.borderColor = darkBlue; option.geo.itemStyle.normal.shadowColor = darkBlue; this.setState({ detail:true, option, curMap:sqJson }); this.drawMap(sqJson); } else if (detail && zoom < threshold) { // 切换默认地图 option.geo.itemStyle.normal.borderColor = defaultBlue; option.geo.itemStyle.normal.shadowColor = defaultBlue; this.setState({ detail:false, option, curMap:geoJson }); this.drawMap(geoJson); } } render() { const { position } = this.state; return (<div> <div id=“xc-map” className={styles.map}></div> </div>); }}export default XcMap;注意地图每次缩放或者移动后，应该将zoom和center值保存在状态的option属性中，这样，进行其他操作而导致重新绘图时，能够记住最新的状态，不至于恢复初始样子。地图平滑切换的关键就在于保持缩放和中心位置这两个状态。 ...

Vue 结合 echarts 原生 html5 实现拖拽排版报表系统

前言不知道各位 coder 有没有碰到过许多重复的业务需求，比如排版相类似的报表，只不过是顺序稍微换了一下，就是一个新的页面，虽然基于模板思想来写的话也能减少不少代码，但是相对的不那么方便，笔者最近就是碰到了类似的需求，忍无可忍，遂该项目便诞生了了。正文演示gif 图稍大，若加载不出来请稍等片刻 (..••..)项目地址如果觉得我有帮到什么忙的，欢迎 star，我会更有动力的 ( ••)。Vue 拖拽图表使用方法详细的开发指南和配置参数就不在此赘言，在项目文档中已经有详细的说明，这里只是稍微介绍一下。首先该项目分为两个页面，一个是拖拽排版页面，一个是预览页面，布局都在排版页面中完成在排版页面中，左侧的 + 用来添加行（row），右侧的 + 用来添加列（col），或称组件所有的操作皆可通过拖拽完成，在完成排版之后点击 >> 按钮即可预览生成的页面在预览页面中有纯前端实现的 pdf 导出功能，具体思想是将 dom 转为 canvas，再导出为图片，再将图片转为 pdf当前的数据传输方式是将布局保存在了 localstorage 中得以实现的实际项目中建议的流程是先在排版页面中新建或者修改布局，在预览页面再保存或者更新布局后语减少人类重复无意义的工作，这就是程序员存在的意义，同时也是我的目标，不可否认该项目里面还是有不少冗余代码，一点点修改一点点完善，也欢迎大家私信我交流交流，撒花。页脚代码即人生，我甘之如饴。我在这里 gayhub@jsjzh 欢迎大家来找我玩儿。欢迎小伙伴们直接加我，拉你进群一起学习前端呀，记得备注一下你来自哪里哦。

一个思维转换，让Echarts能够绘制不刻度均匀数值轴

最近项目组接到了许多对图表有特殊要求的需求，比如今天说的这个呈现光纤的中断时长分布的需求：光纤的中断大部分落在30分钟之内，但偶尔遇到特殊情况时，会出现中断一两天甚至更长的时间，如果把这些时长分布放在一个刻度均匀的数轴上，势必造成大部分的指标（此处为柱状图）特别短的问题，因此，希望建立一个刻度一开始均匀分布，比如10min、20min,到60min之后立刻升为2hour、1day这样的需求。一开始拿到这个任务，我的第一反应，是查找Echarts的配置项手册，希望通过在yAxis上做手脚来解决问题。然鹅事情总是没有想象的顺利，echart对y轴对配置只能指定几种type：‘category’、‘value’和‘log’，虽然配置为log对数轴也可以解决较大值对较小值对影响的问题，但当值较小时也无法通过长度区分开，不够完美。庆幸的是，在echarts的GitHub官网上，pissang大大给出了一个思路：深受启发！为什么一定要依赖Echarts本身给予解决方案呢？完全可以自己构造一个新的分布呀！不多说，开始码：第一步：利用yAixs.axisLabel.formatter伪造一个不均匀坐标轴先给大家看看具体的代码：//利用formatter将y轴上本来为70(min),80(min)的点强制改为2hour和1dayformatter:function(value) { let item=’’; if(value==70){ item=‘2hour’ }else if(value===80){ item=‘1Day’ }else{ item=value+’ min’ } return item} 第二步：将数据映射到一个特定的分布这句话的意思，其实就是自己构造一个函数，将原始数据里较大的数值转换成一个小数值我是这样做的：//模拟数据，其中的200、150是应该落在2hour和1day之间，所以映射后的数据应该落在70min到80min之间let data = [10, 15, 4, 20, 200, 150, 19,70,1441];function formatData(arr){ //自己构造一个用来映射data到均匀数轴上的方法 for(let i=0;i<arr.length;i++){ if(arr[i]>60&&arr[i]<=120){ let percent1=(arr[i]-60)/120; arr[i]=percent110+60; }else if(arr[i]>120&&arr[i]<1440){ let percent2 =(arr[i]-120)/1440; console.log(percent2); arr[i]=percent210+70; } } return arr;}上面这个formatData，其实就是对data数组里超过60的数据进行改造，如果这个数据超过了60min且小于120min（2hour），就按照这个数据在60到120段应该有的比例，映射到60到70段里，而超过2hour且小于1day的数据，则同样按这个方法，计算映射到70到80段里这样一来，任务已经基本完成啦！第三步：将数据反映射为原来的值但是现在在图表里，我们拿到的是映射后的数据，如果此时的tooltip是开放的，那么用户在tooltip里读到的数据就不是原来的200min,150min这种的了，而变成了一个70min到80min之间的较小数据。怎么办？只能在每个需要展示数据的地方，严防死守，将这几条特殊的数据反计算回去咯！tooltip:{ formatter:function(params) { //由于在tooltip里需要展示原始的数据，所以要把映射后的数据反计算回去 let str=params.name+’:’+params.value; if(params.value>=60&&params.value<70){ let percent = (params.value-60)/10 let value = Math.round(percent120+60);//注意此处的percent已经是个浮点数了，所以得到value之前要用四舍五入取整才行 str=params.name+’ : ‘+value; }else if(params.value>70&&params.value<80){ let percent = (params.value-70)/10; let value =Math.round(percent1440+120); str=params.name+’ : ‘+value; } return ‘<div style=“width:70px;height:50px;display:flex;align-items:center”>\ <span style=“background-color:#D53A35;width:15px;height:15px;display:inline-block;border-radius:50%"></span>\ <span>’+str+’</span>\ </div>’ }}嗯，现在就可以了，接下来上一个效果图炫耀一下：一切看上去都是那么的完美，其实这种方法当然还是瑕疵的，你能看出来吗：） ...

echarts实现词云自定义形状

需求：展示出云彩状的词云安装npm install echartsnpm install echarts-wordcloud词云安装官网 https://github.com/ecomfe/ech…引入到当前页面import React from ‘react’;import ’echarts-wordcloud’;import echarts from ’echarts’;class Wordcloudl extends React.Component{ componentDidMount() { var myChart = echarts.init(document.getElementById(‘wordcloudl’)); var maskImage = new Image(); //重点：云彩图片的base64码 maskImage.src = ‘data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjI1NnB4IiBoZWlnaHQ9IjI1NnB4IiB2aWV3Qm94PSIwIDAgNTQ4LjE3NiA1NDguMTc2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NDguMTc2IDU0OC4xNzY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBkPSJNNTI0LjE4MywyOTcuMDY1Yy0xNS45ODUtMTkuODkzLTM2LjI2NS0zMi42OTEtNjAuODE1LTM4LjM5OWM3LjgxLTExLjk5MywxMS43MDQtMjUuMTI2LDExLjcwNC0zOS4zOTkgICBjMC0yMC4xNzctNy4xMzktMzcuNDAxLTIxLjQwOS01MS42NzhjLTE0LjI3My0xNC4yNzItMzEuNDk4LTIxLjQxMS01MS42NzUtMjEuNDExYy0xOC4yNzEsMC0zNC4wNzEsNS45MDEtNDcuMzksMTcuNzAzICAgYy0xMS4yMjUtMjcuMDI4LTI5LjA3NS00OC45MTctNTMuNTI5LTY1LjY2N2MtMjQuNDYtMTYuNzQ2LTUxLjcyOC0yNS4xMjUtODEuODAyLTI1LjEyNWMtNDAuMzQ5LDAtNzQuODAyLDE0LjI3OS0xMDMuMzUzLDQyLjgzICAgYy0yOC41NTMsMjguNTQ0LTQyLjgyNSw2Mi45OTktNDIuODI1LDEwMy4zNTFjMCwyLjg1NiwwLjE5MSw2Ljk0NSwwLjU3MSwxMi4yNzVjLTIyLjA3OCwxMC4yNzktMzkuODc2LDI1LjgzOC01My4zODksNDYuNjg2ICAgQzYuNzU5LDI5OS4wNjcsMCwzMjIuMDU1LDAsMzQ3LjE4YzAsMzUuMjExLDEyLjUxNyw2NS4zMzMsMzcuNTQ0LDkwLjM1OWMyNS4wMjgsMjUuMDMzLDU1LjE1LDM3LjU0OCw5MC4zNjIsMzcuNTQ4aDMxMC42MzYgICBjMzAuMjU5LDAsNTYuMDk2LTEwLjcxNSw3Ny41MTItMzIuMTIxYzIxLjQxMy0yMS40MTIsMzIuMTIxLTQ3LjI0OSwzMi4xMjEtNzcuNTE1ICAgQzU0OC4xNzIsMzM5Ljc1Nyw1NDAuMTc0LDMxNi45NTIsNTI0LjE4MywyOTcuMDY1eiIgZmlsbD0iI0ZGRkZGRiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=’; maskImage.onload = function(){ myChart.setOption( { backgroundColor:’#fff’, tooltip: { pointFormat: ‘{series.name}: <b>{point.percentage:.1f}%</b>’ }, series: [{ type: ‘wordCloud’, gridSize: 1, sizeRange: [12, 55], rotationRange: [-45, 0, 45, 90], maskImage: maskImage, textStyle: { normal: { color: function() { return ‘rgb(’ + Math.round(Math.random() * 255) + ‘, ’ + Math.round(Math.random() * 255) + ‘, ’ + Math.round(Math.random() * 255) + ‘)’ } } }, left: ‘center’, top: ‘center’, right: null, bottom: null, data:[ { name: ‘Sam S Club’, value: 10000, }, { name: ‘Macys’, value: 6181 }, { name: ‘Amy Schumer’, value: 4386 }, { name: ‘Jurassic World’, value: 4055 }, { name: ‘Charter Communications’, value: 2467 }, { name: ‘Chick Fil A’, value: 2244 }, { name: ‘Planet Fitness’, value: 1898 }, { name: ‘Pitch Perfect’, value: 1484 }, { name: ‘Express’, value: 1112 }, { name: ‘Home’, value: 965 }, { name: ‘Johnny Depp’, value: 847 }, { name: ‘Lena Dunham’, value: 582 }, { name: ‘Lewis Hamilton’, value: 555 }, { name: ‘KXAN’, value: 550 }, { name: ‘Point Break’, value: 265 }] }] }) } } render () { return( <div> <div id=‘wordcloudl’ style={{height:400}}></div> </div> ) }}export default Wordcloudl;如果没有看懂还有更多的地方可以参考：ecahrts形状不一的词云：https://download.csdn.net/dow…基于ecahrts的词云：https://blog.csdn.net/u013808…ecahrts字符云：https://blog.csdn.net/shelbya…echarts之词云随机颜色的配置：https://blog.csdn.net/IT_1692… ...

vue中使用echarts 使用记录

仅以此记录下个人使用echart的方法，毕竟好记性不如烂笔头。参考资料手摸手，带你用vue撸后台系列三(实战篇)安装echartsnpm install echarts –saveecharts package版本"echarts": “^4.2.0-rc.2"utilsexport function debounce (func, wait, immediate) { let timeout, args, context, timestamp, result const later = function () { // 据上一次触发时间间隔 const last = +new Date() - timestamp // 上次被包装函数被调用时间间隔last小于设定时间间隔wait if (last < wait && last > 0) { timeout = setTimeout(later, wait - last) } else { timeout = null // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用 if (!immediate) { result = func.apply(context, args) if (!timeout) context = args = null } } } return function (…args) { context = this timestamp = +new Date() const callNow = immediate && !timeout // 如果延时不存在，重新设定延时 if (!timeout) timeout = setTimeout(later, wait) if (callNow) { result = func.apply(context, args) context = args = null } return result }}chart组件代码<template> <div :class=“className” :style="{height:height,width:width}"></div></template><script>import echarts from ’echarts’import { debounce } from ‘@/utils’export default { props: { className: { type: String, default: ‘chart’ }, width: { type: String, default: ‘100%’ }, height: { type: String, default: ‘350px’ }, autoResize: { type: Boolean, default: true }, chartData: { type: Object } }, data () { return { chart: null } }, mounted () { this.initChart() if (this.autoResize) { this.__resizeHanlder = debounce(() => { if (this.chart) { this.chart.resize() } }, 100) window.addEventListener(‘resize’, this.__resizeHanlder) } }, beforeDestroy () { if (!this.chart) { return } if (this.autoResize) { window.removeEventListener(‘resize’, this.__resizeHanlder) } this.chart.dispose() this.chart = null }, watch: { chartData: { deep: true, handler (val) { this.setOptions(val) } } }, methods: { setOptions (val) { this.chart.clear() // 清空画布 this.chart.setOption(val) }, initChart () { this.chart = echarts.init(this.$el, ‘macarons’) this.setOptions(this.chartData) } }}</script>使用方法<template> <div> <charts :chartData=“Option”></charts> </div></template><script>import Charts ‘@/components/Charts’export default { name: ‘chartDemo’, components: { Charts }, data () { return { Option: {} } }, mounted () { this.getList() }, methods: { getList () { this.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’ }] } } }</script> ...