随笔分类 - echarts
摘要：先看效果图 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一个 ECharts 实例</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile
阅读全文
摘要：配置单位 option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], name: '(个)', nameLocation: 'start', // 在头部 //间距 na
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>w3cschool (www.w3cschool.cn) </title> <!-- 引入 echarts.js --> <script src="https://cdn.boot
阅读全文
摘要：场景描述 echarts主要用于数据可视化展示 有些时候，我们可能会根据不同的条件，在页面上进行显示和隐藏。 比如说：页面最初展示了数据，当我点击不同的按钮的时候。 echarts会对应的展示或者隐藏。 下面当我点击单个机构的时候。 echarts会隐藏，点击多个机构的时候，echarts会展示出来
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
阅读全文
摘要：通过 show:false控制手否显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
阅读全文
摘要：设置legend样式 legend: { x: 'center', data: ['班车', '包车'], icon: "circle", // 这个字段控制形状 类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none itemWidt
阅读全文
摘要：<!DOCTYPE html> <html> <!-- https://blog.csdn.net/weixin_42698255/article/details/89249531 --> <head> <meta charset="utf-8"> <title>五分钟上手之饼状</title> <
阅读全文
摘要：option = { title: { text: '折线图堆叠' }, tooltip: { trigger: 'axis' }, //定义折线图legend的形状哈 legend: { itemWidth: 10, itemHeight: 1, itemGap: 10, data:[ {name
阅读全文
摘要：var option = { tooltip: { trigger: 'item' }, legend: { top: '5%', left: 'center' }, //中央自定义文字 title:{ text:'总考生数', left:'center', top:'45%', textStyle
阅读全文
摘要：xAxis: { data: ["土地、房屋及建筑物", "遇用设备", "遇用设备", "裤子", "家具、用具、装具及动植物", "袜子"], // 坐标与标签刻度对齐 axisTick: { alignWithLabel: true } },
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一个 ECharts 实例</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echa
阅读全文
摘要：我们在使用echarts中，可能会遇见文字太长。导致显示不完全。 我们可以使用换行来处理 第一方式直接使用 \n 文字直接换行显示 使用\n <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一个 ECharts 实例</tit
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>第一个 ECharts 实例</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echa
阅读全文
摘要：series: [{ name: '销量', type: 'bar', barWidth : 30,//柱图宽度 data: [5, 20, 36, 10, 10, 20], itemStyle: { //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多 normal: {
阅读全文
摘要：barWidth属性 series: [{ name: '销量', type: 'bar', barWidth : 30,//柱图宽度 data: [5, 20, 36, 10, 10, 20] }]
阅读全文
摘要：1==>tooltip 类似饰hover效果提示框组件。光标放上去会触发 2==>formatter // 饼图 {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比） 3==>itemStyle 饼图各个部分之间的间隔 4==>legend通常是是解释说明每一个部分的 如果将
阅读全文
