echarts
听听那晚风
这个作者很懒,什么都没留下…
展开
-
uniapp 如何使用echarts 以及解决tooltip自定义不生效;dataZoom报错问题
uniapp如何使用echarts并且如何自定义tooltip,以及echarts层级太高怎么办原创 2024-01-12 13:53:05 · 2998 阅读 · 4 评论 -
echarts报错: Can‘t get DOM width or height. Please check dom.clientWidth and dom.c
具体报错:echarts.js?a670:2220 Can’t get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.出现问题的场景:我是在tab分页中需要插入echarts柱形图,默认开始是设备oee报表这个分页。报错原创 2021-07-13 19:55:24 · 11577 阅读 · 5 评论 -
vue中在echarts里设置的定时器清除不掉问题
在动态图里,往往需要用到定时器去动态渲染数据,我的需求是:当x轴类目过多的时候,就让它自动滚动,这个时候需要用到定时器去动态的控制dataZoom里endValue的值,this.barInter = setInterval(() => { // 每次向后滚动一个,最后一个从头开始。 // console.log(this.xNum) if (option.dataZoom[0].endValue >= option.series[0].data原创 2021-06-29 11:27:41 · 1469 阅读 · 0 评论 -
让echarts 柱形图x轴的刻度显示在柱形中间,刻度和标签对齐
关键点:xAixs.axisTick.alignWithLabel:truexAxis: { type: "category", //类名轴 data: [ "3月1日", "3月2日", "3月3日", "3月4日", "3月5日", "3月6日", "3月7日", ], .原创 2021-05-27 20:24:25 · 14675 阅读 · 0 评论 -
实现echarts数据堆叠柱状图,并自定义每个类目柱形的颜色
关键点:series.stack: “”, 同个类目轴上系列配置相同的stack值可以堆叠放置。具体实现series: [ { name: "绿灯", type: "bar", stack: "total", emphasis: { focus: "series", }, data: [95, 90, 80, 6.原创 2021-05-27 20:19:38 · 10093 阅读 · 3 评论 -
echarts x轴长度不够时导致文本显示不全,让标签文本倾斜展示
关键点:xAxis.axisLabel.interval:0 强制显示所有标签、 xAxis.axisLabel.rotate:旋转角度 xAxis: { type: "category", //类名轴 data: [ "待人", "中途调模", "换料", "待料", "设备故障", "换款", .原创 2021-05-27 20:11:40 · 761 阅读 · 0 评论 -
echarts如何将柱形图的柱子分割成一小块一小块,也就是象形柱图
关键点:series.type: “pictorialBar”,<div class="cl-top-content" id="deviceOee" style="width:500px;height:200px"></div>mounted() { this.barChart(); },//设备OEE barChart() { let myChart = this.$echarts.init(document.getElementById.原创 2021-05-27 20:05:31 · 5161 阅读 · 0 评论 -
自定义echarts x轴 y轴每个刻度的文本颜色
关键点:yAxis.axisLabel.textStyle.color、xAxis.axisLabel.textStyle.color具体实现yAxis: [ { type: "category", show: true, inverse: false, data: ["80%以上", "50%-80%", "50%以下"], axisLine: {//刻度线显.原创 2021-05-27 19:57:57 · 928 阅读 · 0 评论 -
echarts自定义每个柱形颜色不一样
关键点 smeries-bar.itemStyle 设置图形样式series: [{ type: "bar", itemStyle: { normal: { // barBorderRadius: [4, 4, 4, 4], color: function (params) { var colorlist = ["#81D3F8", "#FF6600", "#FF004D".原创 2021-05-27 19:52:37 · 363 阅读 · 0 评论 -
Vue如何使用echarts插件,以及简单的 柱形图 折线图 饼图 多列柱形图案例
1、安装npm install echarts --save2、引入全局引入在main.js文件引入import echarts from 'echarts'Vue.prototype.$echarts = echarts按需引入// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。import * as echarts from 'echarts/core';// 引入柱状图图表,图表后缀都为 Chartimport { BarChart原创 2021-03-03 10:38:05 · 686 阅读 · 0 评论 -
echarts饼图显示为环形图,以及将某一项的数值显示在环形正中央
效果:实现关键: radius: [‘30%’, ‘45%’], // 饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的 45% 长度。30%为内圈大小,45%为外圈,中间15%就是环形图大小该配置项是写在series:[{radius: [‘30%’, ‘45%’]}]里...原创 2020-10-27 15:40:31 · 6670 阅读 · 0 评论 -
解决 echarts动态渲染数据图形不生效问题
我们都知道echarts图标数据是写在option = {}对象里,但是数据不可能是固定值,而是通过后端接口返回来的,本以为只需要在 data里设置一个变量去接收返回的数据,然后再将变量赋值给echarts就可以了,结果踩坑了!发现这样并不能生效。经过一段时间分析,原因就是 vue axios属于异步加载数据,数据改变了,但是没有告诉echarts,导致echarts并不知道数据变化了,所以得再数据变化后告诉echarts,让它重新渲染一次。**解决办法**:在vue里我们可以很好的用到 [watch]原创 2020-08-19 11:52:10 · 11378 阅读 · 2 评论 -
详解:当鼠标放上echarts图形时,显示数据、名称,或者自定义tooltip弹窗
效果一:效果二:主要知识点:tooltip{}该配置项为:提示框组件相关设置效果一实现代码tooltip: {//提示框组件 trigger: 'item', //item数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。 axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'shadow' // 默认为直线,可选为:'line' | 'shadow' }, formatter: '{a} <原创 2020-08-10 12:09:10 · 40258 阅读 · 0 评论 -
详细讲解:Vue使用echarts随浏览器放大缩小自适应
最近项目要用到echarts画图,踩了个自适应的坑,在这里总结一下,首先看未bug图分析一下:左边的盒子,也就准一等品花颜色得分情况没有出来是因为我最外边的盒子设置的固定宽,如果设置固定宽 echarts是能够自适应的,但是页面会挤在一起,也就是左边 中间 右边的盒子间隔会随着浏览器窗口放大变小,最后挤在一起。所以为了自适应,我把盒子的宽都设成百分比了;中间和右边的div盒子我就是设置百分比宽,这样设置页面是不会挤在一起了,但是echarts无法自适应,大小固定不变,导致图形超出盒子,也就是现在见到的原创 2020-08-01 16:34:12 · 9957 阅读 · 2 评论 -
echarts自定义饼图的填充颜色,以及指示线和指示文字设置
效果图如下:完整实现代码:<template> <div id="center-top" style="width: 666px;height: 375px;"></div></template><script> var echarts = require('echarts'); export default { data() { return {} }, methods:{ pieChart() { let原创 2020-07-27 16:41:27 · 6541 阅读 · 0 评论 -
echarts自定义折线图填充色、折线点、折线颜色
效果如下:对比官网折线图案例,我所做的变化有以下几点:1、x、y轴轴线颜色设置、字体颜色 大小设置;2、折线颜色设置、折线转折点样式设置;3、填充色样式设置关于第一点我上条博客有写方法,有需要的朋友可以去看一下,在这里我就不多做声明了;第二点的实现方法:在配置项series:{}里配置第三点实现方法:在配置项series:{}里配置这样我们的折线图效果就实现啦,下面是完整代码:<template> <div id="data-lf-body" class="dat原创 2020-07-27 16:20:07 · 6225 阅读 · 0 评论 -
echarts柱形图自定义字体样式,以及柱形的填充色
最近项目需求要用echarts做一些数据分析图表,ui设计的图比较美观,显然echarts默认的图表样式满足不了需求,看官网文档之后完美的还原了ui图,在这里稍微的总结一些,首先效果图如下:这里我所做的变化有这几点:1、x轴的轴线颜色、字体颜色,以及把刻度取消了2、y轴的轴线颜色、坐标指示线颜色、字体颜色、刻度取消;3、柱形填充色为自定义渐变色第一点的实现方法:在配置项xAxis:{}配置第二点实现方法:在配置项yAxis:{}里配置第三点实现方法:在配置项series:{}里配置要原创 2020-07-27 15:55:16 · 5954 阅读 · 0 评论