echarts
慢慢の成长
摸鱼之余,来点小乐趣,写作不足之处,请大佬指教。
展开
-
Echarts tooltip自动显示
echarts tooltip自动展示原创 2022-07-20 17:11:29 · 2472 阅读 · 0 评论 -
vue项目中折线图的渲染
本文以echart5.0版本实现,4.0版本引入详见柱状图引入import * as echarts from 'echarts'export default { data () { return {} }, methods: { init () { let oldData = {'2021-03-03': [{'type_id': '25a7185abf5611eaa8a9000c29d3cc31', 'type_name': '厨余垃圾', 'weight原创 2021-07-07 10:07:02 · 284 阅读 · 0 评论 -
Echarts内置渐变器:new echarts.graphic.LinearGradient(a,b,c,d,arr)
Echarts实现渐变颜色如果给echarts图设置颜色,我们会在 option 中 传入 color 字段的一个数组let option = { color:['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']}对于颜色渐变的起始角度,还有渐变程度,并非直接用数字就可以直白表达出来的color: [原创 2021-04-13 14:54:08 · 5034 阅读 · 0 评论 -
vue项目中饼图的渲染
注意:浒苔返回的数据字段可能会和echarts实例对应的字段不一样,需要我们处理<template> <div> <section ref="pieChart" style="width: 100%;height:400px"></section> </div></template>效果展示:<script>import echarts from 'echarts'export defau.原创 2020-07-16 13:52:27 · 701 阅读 · 0 评论 -
vue项目Echarts柱状图动态渲染效果
html写法:<template> <div> <section ref="barChart" style="width: 50%; height: 500px;"></section> <section ref="echartsRef" style="width: 50%; height: 500px;"></section> </div></template>js部分:<原创 2020-07-16 13:31:02 · 1335 阅读 · 0 评论