图表使用
Echarts Api 使用 及 问题
我叫陈小皮。
前端菜鸟,请多指教
展开
-
Echarts 绘制大区数据
需求:地图区分大区展示,将某几个省份绘制成一个大区图形式注意:如果需要直辖市绘制为一个区域,不绘制区,同样的思路// config.jsexport const regionsMap = { 华北大区: { names: ['北京', '天津', '河北', '山西', '内蒙古'], cp: [115.24, 41.54] // 名称的经纬度,可以自己调整到合适的位置 }, 东北大区: { names: ['黑龙江', '吉林', '辽宁'], cp:原创 2022-04-14 14:31:34 · 1691 阅读 · 0 评论 -
Echarts 雷达图 图例名称 可点击,且可用样式区分
需求:雷达图的图例名称可点击,点击后文字有样式上的变化暂时只能找到颜色的区分,如果有其他的可以修改字体的 多种样式 的方式,希望评论区分享option = { radar: { indicator: [ // { name: 'name1', max: 100 } ], triggerEvent: true // 注意:设置可点击!!! }}radarChart.on('click', (info) => { if (info.targetType =原创 2022-04-14 14:07:45 · 1797 阅读 · 0 评论 -
Echarts 报错 Uncaught Error: Invalid geoJson format coordinate.charCodeAt is not a function
地图 下钻时 ,同一个区域点击多次会出现 如下图 报错原因是 每次引入的JSON文件都是新的,应该对绘图所需的JSON文件进行缓存因为 echarts 会绘制解析 json 之后 执行 decode 方法 后 会将其 UTF8Encoding 的值 从 true 改为false,第二次绘制 时如果 为 false 则 不需要走 decode 方法,如果每次都是新引入的 json,那每次都走 decode 就会报错// 问题代码// chinaJson 中国地图json // names =>原创 2022-01-18 10:01:53 · 2454 阅读 · 0 评论 -
Echarts geo地图 visualMap 自定义 分段
export function toCeil (value, num) { let val = Math.ceil(value * Math.pow(10, num)) / Math.pow(10, num) + '' if (num > 0) { const intp = val.split('.')[0] const decp = val.split('.')[1] || '' if (decp.length < num) { val = `${i原创 2022-03-10 11:06:54 · 2140 阅读 · 0 评论 -
F2 柱状图 使用 scrollBar 不可滑动
1. 检查语法是否有问题 (https://f2.antv.vision/en/docs/api/chart/scroll-bar)const F2 = require('@antv/f2/lib/index');const ScrollBar = require('@antv/f2/lib/plugin/scroll-bar');// 注册插件 ScrollBarF2.Chart.plugins.register(ScrollBar); // 这里进行全局注册,也可以给 chart 的实例注册原创 2021-10-11 16:53:15 · 864 阅读 · 0 评论 -
Echarts 柱状图,带背景色且数值显示在最顶部
showBackground: true 可以设置背景色,但是 label 不能显示在背景色的顶部,所以不满足需求此时需要再来一个柱来显示背景色,且加上label注意:barGap 为 -100% 不然不能与另一个柱重合哦~此示例为官方示例 外加自己修改...原创 2022-03-16 10:48:59 · 3801 阅读 · 0 评论 -
echarts - 折线图 - 每分钟刷新数据并显示
<!DOCTYPE html><html style="height: 100%"><head> <meta charset="utf-8"> <title>每分钟更新</title></head><body style="原创 2018-07-05 11:41:51 · 19360 阅读 · 9 评论 -
echarts - 折线图只显示某几个拐点的数据
效果展示: 代码: 单独对每个数据项进行配置, 如果显示数据则设置label的show为trueseries: [{ data: [{ value:9, label:{ show:false }, },{ value:20, label:{ ...原创 2018-07-09 14:54:03 · 14751 阅读 · 6 评论 -
echarts 在地图上显示数值
预期效果代码配置series: [{ name: '', type: 'map', mapType: 'china', roam: false, itemStyle: { normal: { label: { show: true, ...原创 2018-06-27 10:20:51 · 23352 阅读 · 5 评论 -
echarts - 城市经纬度 json
[ { "name": "北京市", "log": "116.46", "lat": "39.92", "children": [ { "name": "北京", "log": "116.46",转载 2018-07-10 16:16:55 · 2329 阅读 · 0 评论 -
echarts常用配置以及在vue中使用介绍
echarts在vue中使用:安装echarts: npm install echarts –save-devecharts 在某个vue组件中的局部使用:import echarts from 'echarts'// 使用echarts.init(document.getElementById('id名'))echarts在多个组件中使用,便可配置到全局, main.j...原创 2018-06-27 11:27:43 · 1162 阅读 · 0 评论