随笔分类 -  Echarts

摘要:效果图 代码 <template> <div class="app"> <div class="demo" ref="demoRef"></div> </div> </template> <script> import * as echarts from 'echarts' export defau 阅读全文
posted @ 2024-08-26 23:49 ^Mao^ 阅读(247) 评论(0) 推荐(0) 编辑
摘要:背景 有的情况我们需要根据echarts展示的数据查看对应的明细,查看明细的方式可能是向后端发送网络请求或者是后端早已经把数据全部发送给前端、由前端自己去做筛选,那么我们可以根据echarts提供的事件去处理逻辑 步骤 vue3中引入echarts import { createApp } from 阅读全文
posted @ 2022-08-10 22:20 ^Mao^ 阅读(4346) 评论(0) 推荐(0) 编辑
摘要:备注 参考echarts官网中的"color"配置章节 用法 语法:通过调用echarts实例对象的方法 前四个参数表示从哪个方向到哪个方向的渐变,比如从(0,0)到(1,0) 则表示从左向右 第5个参数表示颜色从0% 到100% 的什么颜色进行渐变 color: echartsInstance.g 阅读全文
posted @ 2022-07-02 22:01 ^Mao^ 阅读(677) 评论(0) 推荐(0) 编辑
摘要:地图 配置项 const myChart = echarts.init(document.querySelector(".demo")); // 1. 加载地图矢量数据 $.getJSON( "https://geo.datav.aliyun.com/areas_v3/bound/220000_fu 阅读全文
posted @ 2022-06-28 20:52 ^Mao^ 阅读(132) 评论(0) 推荐(0) 编辑
摘要:步骤 引入echarts.js,jquery,并创建图表容器、初始化echarts对象 <script src="./lib/echarts.min.js"></script> <script src="./lib/jquery.min.js"></script> <style> .demo { w 阅读全文
posted @ 2022-06-28 07:58 ^Mao^ 阅读(209) 评论(0) 推荐(0) 编辑
摘要:通用配置 配置项 var option = { // 标题设置 title: { text: '成绩展示', // 标题文字 textStyle: { // 标题文字样式设置 color: 'red' }, left: '50%', // 标题距离左边的距离 top: 10 // 标题距离顶部的距离 阅读全文
posted @ 2022-06-26 22:42 ^Mao^ 阅读(154) 评论(0) 推荐(0) 编辑
摘要:echarts版本号 如果是通过script标签引入的话,则可以直接在控制台输入echarts就可以看到版本号的信息。我当前的版本号是:4.3.0 实现方式 以下配置都是配置在series.color下 方式1:使用echarts内置的渐变色生成器 (0,0,1,0) 表示 从坐标(0,0)到坐标( 阅读全文
posted @ 2021-10-01 14:06 ^Mao^ 阅读(1979) 评论(0) 推荐(0) 编辑
摘要:代码 需要设置series.itemStyle.normal.barBorderRadius属性,其中此属性值支持 number 或 数组。 如果传递数组,则需要传递四个元素,依次表示 左上,右上,右下、左下 示例代码: series: [ { data: [10,20,70,40], type: 阅读全文
posted @ 2021-10-01 13:44 ^Mao^ 阅读(4131) 评论(1) 推荐(1) 编辑

点击右上角即可分享
微信分享提示
主题色彩