小太阳的博客

如图所示: 当鼠标滑过圆环和圆环内文字的时候，鼠标是小手，但是客户呢，就不想要小手样式首先，我查询了echarts官网，发现饼图的 cursor 属性然后在代码中修改： series: [ { .... type: 'pie', label: { normal: { show: true, positi

如图所示：首先我想到了使用echarts，用属性控制x轴y轴的隐藏，然后修改拐点以及折线上的文字代码：图表组件<template> <div id="tem-chart" style=" height: 120px" /></template><script>const echarts = require('echarts');export default { name: 'TemChart', props: {

如图所示，需要分别自定义legend的宽高想要实现不同样式的图例，需要用数组写对应图例的样式代码如下： legend: [ { data: ['降水量'], left: '30%', textStyle: { color: '#9FC6F6' }, icon: 'rect', // 形状 itemWidth: 7, // 宽 itemHeight:

要求：风速和阵风共用风速这条y轴核心：echarts的yAxisIndex属性yAxisIndex：使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用比如阵风要和风速共用一条y轴，只需要把阵风的index值设置为风速的。代码示例： if (item.indexOf('wind') !== -1) { item = 'wind'; _in...

如图所示，因为数据太多，看起来比较杂，所以需要用dataZoom实现区域缩放。echarts代码如下：let zoom = 100; dataZoom: [ { type: 'inside', realtime: true, start: 0, end:...

效果如下图：X轴和Y轴都要加坐标轴指示器代码如下： tooltip: { trigger: 'axis', // 坐标轴指示器 axisPointer: { type: 'cross', // 十字准星指示器,表示启用两个正交的轴的 axisPointer label: { backgroundColor: 'rgba(0,122,255,0.6)',

如果是完全不让legend显示，只需要把show属性设置成false即可，默认是true显示 legend: { show: false },但是如果legend不全部显示或者指定某个显示，就要用到legend下的selected属性，不想让那个legend显示，就把对应的legend设置成false legend: { data: _legend, selected: { 最小天数: false }, x:

效果图：画这种区域中主要是利用了series的两个属性：思路：上下限都画上区域，然后折线利用图形透明度隐藏，给上区域加上颜色，给下区域加上白色（echarts图背景是啥色，就加啥色） lineStyle: { opacity: 0 }, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形 areaStyle: { color: 'rgba(0,122,255,0.1)' }, // 填充的颜色我的需求是最大天数、最小天数、

在第二个选项卡里，echarts热力图，我设置了宽度为100%，但是仍然不起作用，如下图打开控制台发现已经默认成了100px。导致这样的原因是因为：我的图表在tab选项卡里，因为热力图一开始是display：none；在一开始初始化执行js的时候找不到这个元素，所以会出现问题。解决方法：在echarts初始化之前再用js获取当前屏幕的大小，然后再给他设置宽度就可以了。代码如下： <div id="frequencyChart" :style="{width: 'ch

最近项目中遇到这样一个问题，如下图：由于容器太宽，数据量不多，导致每一个x轴的间距都特别大，还导致了柱状图超过了坐标轴。这个轴由于使用的是类目轴，首先我想到的是用留白属性，就把 boundaryGap设置为true xAxis: { type: 'category', boundaryGap: true,//设置为true ...