随笔分类 - ECharts
摘要：drawCharts() { let myChart = echarts.init(document.getElementById('main')); let option = { tooltip: { trigger: 'axis', axisPointer: { type: 'line' } }
阅读全文
摘要：使用饼图时候，当有些数据少的时候，就会造成指示线的数据重叠问题。avoidLabelOverlap属性设置为true series: [ { name: '分布图', type: 'pie', radius: ['25%', '48%'], center: ['50%', '58%'], avoid
阅读全文
摘要：echart饼图没有数据时候，把标题暂无数据替换成图片 this.myCharts.setOption({ title: { show: !this.flag, // 没数据才显示 extStyle: { color: "gainsboro", fontSize: 20 }, text: "{A|}
阅读全文
摘要：同页面使用多个echarts饼图，封装成一个组件公用。 饼图组件 <!--echarts饼图组件--> <template> <div class="echartsCommon"> <div style="width: 100%; height: 100%" :id="id" class="echa
阅读全文
摘要：dataZoom 现有三种类型：内置型，滑动条型 dataZoom: [ //1.横向使用滚动条 { type: 'slider',//有单独的滑动条，用户在滑动条上进行缩放或漫游。inside是直接可以是在内部拖动显示 show: true,//是否显示 组件。如果设置为 false，不会显示，但
阅读全文
摘要：echarts饼图当数据为0时候数据和指示线会叠在一起 方法一（暂时没想到好办法） 如果value是0就给null tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vert
阅读全文
摘要：记录下 每个单位对应四种项目类型，求出每个单位的项目总分 这是后台返回的数据 let arrData = [ [714.29,999.52, 999, 712.82, 0, 997, 996, 0, 0, 995], [285.43, 0, 0, 285.64, 997, 0, 0, 995.9,
阅读全文
摘要：需要实现这种效果 echarts地图，默认加载 有数据的区域才高亮显示，没有数据的不高亮，然后鼠标滑过高亮区域显示对应的公司、项目数量和名称。 这是后台返回的数据结构 在dataRange里面定义好默认区域需要高亮的颜色 dataRange: { show:false, x: 'left', y:
阅读全文
摘要：行政区域地图修改默认鼠标滑过颜色以及省份之间的边界线颜色记录 myCharts.setOption({ tooltip: { triggerOn: 'click', enterable: true, formatter: function(params, ticket, callback) { co
阅读全文
摘要：vue+element项目，点击echarts图表在dialog弹框中显示具体的柱状图详情信息。控制台没有报错，但柱状图就是没出来 解决方案： 使用$nextTick拿到最新的dom，在他里面加载echarts实例 <div class="dialogBox"> <el-dialog width="
阅读全文
摘要：在series里面再加一个圆，设置他的位置和边框大小即可。 data() { return { option: { title: { show: true, text: '项目总数', subtext: 230, itemGap: 8, left: '49%', top: '42%', textSt
阅读全文
摘要：基本配置： // 指定图表的配置项和数据 var option = { // 标题 title: { text: '主标题', textStyle: { color: 'red' }, subtext: '副标题', subtextStyle: { color: 'blue' }, padding:
阅读全文
摘要：需求：后台返回的项目名称太长，导致显示不开。 可以设置成倾斜和省略号显示那种的 通过一下属性： xAxis.axisLabel. interval（设置成 0 强制显示所有标签） xAxis.axisLabel. rotate（倾斜角度） xAxis.axisLabel. formatter（支持字
阅读全文
摘要：text：主标题 subtext：副标题 textStyle: {} //主标题的属性设置 subtextStyle: {} //副标题的属性 itemGap：主副标题之间的间距 textAlign：整体（包括 text 和 subtext）的水平对齐 项目个数是后台返回的，直接渲染 functio
阅读全文
摘要：项目采用layui+echart 需求：在PC和笔记本下调整窗口大小echarts图形可以自适应。 /** * 初始化项目得分排名 */ function initThisMonthProjectsRanking() { $.ajax({ url: '', type: 'get', data: {
阅读全文
