Dnn01的博客

vue3使用echarts做树图tree

今天做了个上海地图，要求自动轮播每一个区，本来以为会很难搞，但是去网上看了看，复制粘贴就搞定了，以此记录下，方便以后查找。第一步：我们在页面中引入echarts和所需的依赖import echarts from "echarts";import "echarts/map/js/province/shanghai.js";第二步：我们要准备一个有宽高的dom<div class="visual_chart" id="main1"></div>第三步：在methods里

echarts 有两种图时怎么让第二个图的值参考右边坐标轴？在echarts中，有时会有两种图出现展示数据，这是怎么让第二个图的值参考右边坐标轴呢，一个配置项就可以搞定。情况如图：此时，柱状图参考的是左边的y轴，但是，点状图参考的也是左边的y轴，我们只需要在点状图的serise里面设置yAxisIdnex:1,它就能参考右侧坐标轴啦。...

在echarts折线图中，默认折线从刻度中心开始，我们为了图标的美观有时需要折线从头开始显示，一个配置项就可以轻松搞定。boundaryGap:false

echarts x轴数据过多左右滚动显示今天在使用echarts做柱状图时，遇到x轴数据过多的情况，全部显示的话，柱状图都挤到一起了。所以想让它可以显示一部分，其余部分滚动显示，就可以配置dataZoom，它与xAxis、yAxis并列，简单配置后，就可以实现x轴刻度左右滚动了。代码如下：dataZoom: [ { type: "slider", show: true, xAxisIndex: [0],

echarts y轴刻度加单位今天学习到的新知识，如何在echarts图表中给刻度加单位。方法有很多，我用的是formatter来加单位的：yAxis: { min: 0, max: 60, type: 'value', axisLabel:{ formatter:'{value} 亿'， } } 另一种方法是,在Y轴顶部,使用title来说明y轴的含义数据的就行:option = {

echarts 图表和字体自适应浏览器窗口在使用echarts做图表的时候，更换设备或者缩放浏览器窗口大小时，需要自适应浏览器窗口。 1. 自适应浏览器窗口，在setOption后引入下边window.onresize...即可。//根据窗口的大小变动图表 window.onresize = function () { myChart.resize(); //myChart1.resize(); //若有多个图表变动，可多写 }; 2. echerts字体自

echarts 柱状图数据堆叠放置在使用echarts做柱状图时，有时会需要多个柱状图堆叠，这种情况下想要tooltip显示堆叠的柱状图各自的值，可以通过设置stack属性来实现。代码如下：var option = { series:[ { name:"柱状图1", stack:"xxx", }, { name:"柱状图2", stac

echarts 调整图表位置关于图表的位置，之前在论坛上看到一张图，感觉挺清晰明了的，分享给大家，希望能对大家有所帮助。代码如下： option = { tooltip: {}, grid:{//图表位置 x:25,//左 y:45,//上 x2:25,//右 y2:20,//下

echarts 环状图中添加图片由于业务需要，我们可以在饼图内加入图片、图标或文字等让单调的饼图变得美观，这里我是在环状图里添加图片。代码如下：option = { graphic: {//图形中间图片 elements: [{ type: "image", style: { image: require("image/abc.png"),//你的图片地址

echarts x轴刻度文本过长怎么解决？在echarts中，x轴刻度文本过长时，默认会挤在一起显示，这样就看不清刻度文本了，解决方式有好几种，我采用的是在xAxis.axisLabel中使用formatter回调函数让其换行显示。代码如下：axisLabel : { formatter : function(params){ var newParamsName = "";// 最终拼接成的字符串

echarts tooltip提示框超出浏览器窗口怎么隐藏？在使用echarts做图时，发现tooltip默认会超出浏览器窗口外，刚开始想做边境检测，试着写了一些代码发现太麻烦了，需要上下左右做多次判断。最后发现了一个简单快捷的方法，分享给大家。就是在tooltip里配置confine:true,这样当tooltip就不会超出浏览器窗口啦。...