随笔分类 -  echarts

13.y轴加百分号
摘要：yAxis:{ name:'单位：百分比', //y轴单位 // min: 0, // minInterval: 1, max:100, interval:25, axisLabel: { fontSize: 12, fontFamily: "Bebas", color: "#BDD8FB", fo 阅读全文
posted @ 2023-07-06 16:35 cjl2019 阅读(107) 评论(0) 推荐(0)
12.x轴加滚动条
摘要：chartOption: { dataZoom: [ { type: "slider", //给x轴设置滚动条 show: true, //false直接隐藏图形 xAxisIndex: [0], bottom: 0, height: 10, showDetail: false, startValu 阅读全文
posted @ 2023-07-06 16:35 cjl2019 阅读(60) 评论(0) 推荐(0)
11.x轴超长隐藏，鼠标移上去显示全部
摘要：注意：要安装jQuery（看 -- vue项目实战中 -- 常见插件及使用） //步骤一：x轴添加triggerEvent:true 和 xAxis隐藏过长的文字 xAxis: { type: "category", triggerEvent: true, //添加triggerEvent:true 阅读全文
posted @ 2023-07-06 16:34 cjl2019 阅读(89) 评论(0) 推荐(0)
10.x轴字符串换行
摘要：xAxis: { type: "category", axisLine: { lineStyle: { color: "#BDD8FB", fontSize: 12 } }, axisLabel: { color: "#BDD8FB", fontSize: 12, formatter:functio 阅读全文
posted @ 2023-07-06 16:31 cjl2019 阅读(45) 评论(0) 推荐(0)
9.tooltip格式化
摘要：//1.当params是一维数组时 formatter: params => { return ( `${params.seriesName}<br/>` + `<span style="display:inline-block;margin-right:5px;border-radius:10px 阅读全文
posted @ 2023-07-06 16:31 cjl2019 阅读(94) 评论(0) 推荐(0)
8.legend格式化
摘要：<script> const getname = ["时长异常", "时长正常", "无时长"]; //初始化getname const getNum = [0, 0, 0]; //初始化getNum export default{ data(){ return{ chartOption:{ leg 阅读全文
posted @ 2023-07-06 16:30 cjl2019 阅读(37) 评论(0) 推荐(0)
7.水波球
摘要：下载插件：npm install echarts-liquidfill --save 引入插件：import 'echarts-liquidfill/src/liquidFill.js'; <template> <div> <div ref="chart1" class="chart"></div> 阅读全文
posted @ 2023-07-06 16:29 cjl2019 阅读(58) 评论(0) 推荐(0)
6.雷达图
摘要：<template> <div> <div ref="chart1" class="chart"></div> </div> </template> <script> import * as echarts from "echarts"; export default { data() { retu 阅读全文
posted @ 2023-07-06 16:28 cjl2019 阅读(134) 评论(0) 推荐(0)
5.饼图、环图、玫瑰图
摘要：1.饼图 <template> <div> <div ref="chart1" class="chart"></div> </div> </template> <script> import * as echarts from "echarts"; export default { data() { 阅读全文
posted @ 2023-07-06 16:27 cjl2019 阅读(111) 评论(0) 推荐(0)
4.折线图
摘要：1.普通折线图 <template> <div> <div ref="chart1" class="chart"></div> </div> </template> <script> import * as echarts from "echarts"; export default { data( 阅读全文
posted @ 2023-07-06 16:25 cjl2019 阅读(36) 评论(0) 推荐(0)
3.柱状图
摘要：1. 多个柱状图 <template> <div> <div ref="chart1" class="chart"></div> </div> </template> <script> import * as echarts from "echarts"; export default { data 阅读全文
posted @ 2023-07-06 16:23 cjl2019 阅读(57) 评论(0) 推荐(0)
2.vue-charts组件
摘要：1. vue-echarts和echarts的区别 · vue-echarts是封装后的vue插件， 基于 ECharts v4.0.1+ 开发，依赖 Vue.js v2.2.6+，功能一样的只是把它封装成vue插件 这样更方便以vue的方式去使用它。 · echarts就是普通的js库。 2. v 阅读全文
posted @ 2023-07-06 16:20 cjl2019 阅读(299) 评论(0) 推荐(0)
1.echarts下载及安装
摘要：1. 安装echarts 步骤一：git bash here中输入: npm install cnpm -g 步骤二：git bash here中输入: cnpm install echarts --save 步骤三：在 main.js 中写入以下内容： import * as echarts fr 阅读全文
posted @ 2023-07-06 16:18 cjl2019 阅读(622) 评论(0) 推荐(0)