项目总结之echarts 使用

最新推荐文章于 2023-04-13 13:31:38 发布
最新推荐文章于 2023-04-13 13:31:38 发布
阅读量378 收藏
点赞数
文章标签： javascript 前端 ViewUI
原文链接：http://www.cnblogs.com/ichthyo-plu/p/11151325.html
版权

项目上需要使用echarts,对于一个新手前端来说，差点要爆炸了，自身前端基础就不好，echarts就更是不熟了，硬生生的逼着要一周做完一个系统。这算是个小总结吧，以后万一用的上捏。

渐变使用

项目中的echarts图，大多需要渐变，所以先了解一下渐变。echarts官方Demo里面有个例子[https://echarts.baidu.com/examples/editor.html?c=bar-gradient],可以在实例里面了解一下。有个echarts.graphic.LinearGradient这个类。示例中代码是这个样子的：（以下代码修改了一下）

 

{
            type: 'bar',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        1, 0, 0, 0,
                        [
                            {offset: 0, color: 'green'},
                            {offset: 0.5, color: '#0055FF'},
                            {offset: 1, color: '#FF6600'}
                        ]
                    )
                },
                emphasis: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#2378f7'},
                            {offset: 0.7, color: '#2378f7'},
                            {offset: 1, color: '#83bff6'}
                        ]
                    )
                }
            },
        }
View Code

效果如图：

echarts.graphic.LinearGradient中有五个参数，前四个参数分别代表变色的方位右下左上，0, 0, 0, 1,代表渐变色从正上方开始.1, 0, 0, 0,代表渐变色从右边开始渐变。0 1 0 0代表从正下方向正上方渐变，具体可以自己设置看下效果， 第5个参数则是一个数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置, color表示颜色.

渐变还有另一种写法：

// 线性渐变，前四个参数分别是 x0, y0, x2, y2, (右下左上)范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    global: false // 缺省为 false
}
// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
color: {
    type: 'radial',
    x: 0.5,
    y: 0.5,
    r: 0.5,
    colorStops: [{
        offset: 0, color: 'red' // 0% 处的颜色
    }, {
        offset: 1, color: 'blue' // 100% 处的颜色
    }],
    global: false // 缺省为 false
}
// 纹理填充
color: {
    image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
    repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
}
View Code

环形图

在做环形图时，发生了一个很智障的问题，以下会说明一下，先说明在做环形图时，要一次性生产三个环形图，之前项目中搭建的框架使用的时echarts4，在这个项目中使用的时echarts3的版本，结果使用dataset属性时，没有效果，当初以为是自己代码写的有问题，弄了一小时，最后发现版本不对，啊~~~QAQ当然这是一个小插曲。

上代码：

option = {
        legend: {
          bottom: 0,
          left: "center",
          type: "scroll",
          show: true,
          data: ["黄岛滚筒", "天津波轮"]
        },
        tooltip: {},
        dataset: {
          source: [
            ["product", "2012", "2013", "2014",],
            ["黄岛滚筒", 41.1, 30.4, 65.1],
            ["天津波轮", 86.5, 92.1, 85.7]
          ]
        },
        series: [
          {
            type: "pie",
            center: ["17%", "45%"],
            radius: ["60%", "30%"],
            label:{
              show: false,
            },
            labelLine: {
                show: false
            },
            itemStyle: {
              color: function(params) {
                //自定义颜色
                var colorList = ["#3770DA", "#FB7293"];
                return colorList[params.dataIndex];
              }
            }
          },
          {
            type: "pie",
            center: ["50%", "45%"],
            radius: ["60%", "30%"],
             label:{
              show: false,
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              color: function(params) {
                //自定义颜色
                var colorList = ["#3770DA", "#FB7293"];
                return colorList[params.dataIndex];
              }
            },
            encode: {
              itemName: "product",
              value: "2013"
            }
          },
          {
            type: "pie",
            center: ["83%", "45%"],
            radius: ["60%", "30%"],
             label:{
              show: false,
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              color: function(params) {
                //自定义颜色
                var colorList = ["#3770DA", "#FB7293"];
                return colorList[params.dataIndex];
              }
            },
            encode: {
              itemName: "product",
              value: "2014"
            }
          }
        ]
      }
View Code

接下来就是智障的一个问题了，在series.radius设置["60%", "30%"],时，导致环状图的牵引线在里面，然后这个问题困扰了很久，然后问了一个大佬，他说我这两个值设置反了，内心mmp，没救了.

一个环状图代码：

option = {
        legend: {
          bottom: 0,
          left: "center",
          type: "scroll",
          show: true,
          data: ["黄岛滚筒", "天津波轮"]
        },
        tooltip: {},
        graphic: [
          {
            type: "text",
            left: "center",
            top: "center",
            style: {
              text: `总开动率\n 89% `,
              textAlign: "center",
              fill: "#000",
              width: 30,
              height: 30
            }
          }
        ],
        dataset: {
          source: [
            ["product", "2012", "2013", "2014", "2015", "2016", "2017"],
            ["黄岛滚筒", 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
            ["天津波轮", 86.5, 92.1, 85.7, 83.1, 73.4, 55.1]
          ]
        },
        series: [
          {
            type: "pie",
            center: ["50%", "45%"],
            radius: ["30%", "60%"],
            label:{
              show: true,
              position: 'outside',
              formatter:function(params){
                return `${params.percent}% ${params.name}`
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            itemStyle: {
              color: function(params) {
                //自定义颜色
                var colorList = ["#3770DA", "#FB7293"];
                return colorList[params.dataIndex];
              }
            }
          }
        ]
      };
View Code

柱状图

先看原型图：

这个需要背景渐变，这个时候渐变就派上用场了，一二三上代码：

var option = 
    tooltip: {
            trigger: "axis"
          },
          legend: {
            show: false
          },
          grid: {
            top: "15%",
            left: "3%",
            right: "12%",
            bottom: "3%",
            containLabel: true
          },
          color: ["#1A62E8"],
          calculable: true,
          xAxis: [
            {
              type: "category",
              name: "时间",
              data: Array.apply(null, Array(24)).map(function(item, i) {
                return i + 1;
              })
            }
          ],
          yAxis: [
            {
              splitLine: { show: false },
              type: "value",
              interval: 1000,
              name: "单位:台",
              splitArea: {
                show: true,
                areaStyle: {
                  opacity: 0.3,
                  color: [
                    // new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    //   {
                    //     offset: 0,
                    //     color: "#FFFFFF"
                    //   },
                    //   {
                    //     offset: 1,
                    //     color: "#ff0500",
                    //   }
                    // ]),
                    // new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    //   {
                    //     offset: 0,
                    //     color: "#FFFFFF"
                    //   },
                    //   {
                    //     offset: 1,
                    //     color: "#ff8400",
                    //   }
                    // ]),
                    // new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    //   {
                    //     offset: 0,
                    //     color: "#FFFFFF"
                    //   },
                    //   {
                    //     offset: 1,
                    //     color: "#0fff01",
                    //   }
                    // ])
                    {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#FFFFFF" // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#ff0500" // 100% 处的颜色
                        }
                      ],
                      global: false // 缺省为 false
                    },
                     {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#FFFFFF" // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#0fff01" // 100% 处的颜色
                        }
                      ],
                      global: false // 缺省为 false
                    },
                    {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#FFFFFF" // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#ff8400" // 100% 处的颜色
                        }
                      ],
                      global: false // 缺省为 false
                    },
                  ]
                }
              }
            }
          ],
          series: [
            {
              name: "黄岛滚筒",
              type: "bar",
              stack: "总量",
              data: [
                122.0,
                2234.9,
                732.0,
                2423.2,
                2325.6,
                762.7,
                1335.6,
                1262.2,
                332.6,
                220.0,
                62.4,
                33.3
              ],
              markPoint: {
                // data: [
                //   { type: "max", name: "最大值" },
                //   { type: "min", name: "最小值" }
                // ]
              },
              markLine: {
                data: [
                  {
                    type: "average",
                    name: "平均值",
                    lineStyle: { color: "#ff8400" }
                  },
                  {
                    type: "min",
                    name: "最小值",
                    lineStyle: { color: "#ff0500" }
                  },
                  {
                    type: "max",
                    name: "最大值",
                    lineStyle: { color: "#0fff01" }
                  }
                ],
                label: {
                  formatter: "{b}\n{c}/h"
                }
              },
            },
            {
              name: "天津波轮",
              type: "bar",
              stack: "总量",
              data: [
                2.6,
                5.9,
                9.0,
                26.4,
                28.7,
                70.7,
                175.6,
                182.2,
                48.7,
                18.8,
                6.0,
                2.3
              ],
              markPoint: {
                data: []
              },
              markLine: {}
            }
          ]
        };
View Code

效果就出来了。

折线图

折线图是面积渐变

项目中使用vue,所以加了loading，将echarts绑在vue的原型实例上。使用_this.$echarts就可以得到echarts实例。

<div ref="powerLineChart" style="height:220px;width: 100%;"></div>     
var _this = this;
_this.myChart = _this.$echarts.init(_this.$refs.powerLineChart);
 _this.myChart.showLoading();
var option = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["总耗电", "生产耗电", "办公耗电"],
          bottom:0,
        },
        color: ["#FF6600", "#5256B9", "#53C7C7"],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "13%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: Array.from(new Array(24), (item, index) => index + 1)
        },
        yAxis: {
          type: "value",
          name: "单位：度"
        },
        series: [
          {
            name: "总耗电",
            type: "line",
            symbol: "none",
            smooth: true,
            data: [
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              90,
              230,
              210,
              120,
              132,
              101,
              134,
              90
            ],
            markPoint: {
              data: [
                { type: "max", name: "最大值" }
                // {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
                data: [
                  {
                    type: "average",
                    name: "平均值",
                    lineStyle: { color: "#FF6600" }
                  },
                  {
                    type: "min",
                    name: "最小值",
                    lineStyle: { color: "#FE3824" }
                  },
                  {
                    type: "max",
                    name: "最大值",
                    lineStyle: { color: "#07B211" }
                  }
                ],
                label: {
                  formatter: "{b}\n{c}/h"
                }
              },
            itemStyle: {
              normal: {
                color: "#5256B9",
                shadowBlur: 8,
                shadowColor: "#25d5f0",
                borderColor: "#5256B9",
                borderWidth: 3,
                backgroundColor: "transparent"
              }
            },
            areaStyle: {
              normal: {
                color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#5256B9"
                  },
                  {
                    offset: 1,
                    color: "#FFFFFF"
                  }
                ])
              }
            }
          },
          {
            name: "生产耗电",
            type: "line",
            symbol: "none",
            smooth: true,
            data: [
              220,
              182,
              191,
              234,
              290,
              330,
              310,
              150,
              232,
              201,
              154,
              190,
              330,
              90,
              230,
              210,
              120,
              132,
              101,
              123,
              32,
              23
            ],
            markPoint: {
              data: [
                // {type: 'max', name: '最大值'},
                // {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                // {type: 'average', name: '平均值'}
              ]
            },
            itemStyle: {
              normal: {
                color: "#FF6600",
                shadowBlur: 8,
                shadowColor: "#25d5f0",
                borderColor: "#FF6600",
                borderWidth: 3,
                backgroundColor: "transparent"
              }
            },
            areaStyle: {
              normal: {
                color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#FF6600"
                  },
                  {
                    offset: 1,
                    color: "#FFFFFF"
                  }
                ])
              }
            }
          },
          {
            name: "办公耗电",
            type: "line",
            symbol: "none",
            smooth: true,
            data: [
              150,
              232,
              201,
              154,
              190,
              330,
              410,
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              150,
              232,
              201,
              154,
              190,
              330,
              23,
              12
            ],
            markPoint: {
              data: [
                // {type: 'max', name: '最大值'},
                // {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              data: [
                // {type: 'average', name: '平均值'}
              ]
            },
            itemStyle: {
              normal: {
                color: "#53C7C7",
                shadowBlur: 8,
                shadowColor: "#FFFFFF",
                borderColor: "#53C7C7",
                borderWidth: 3,
                backgroundColor: "transparent"
              }
            },
            areaStyle: {
              normal: {
                color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#53C7C7"
                  },
                  {
                    offset: 1,
                    color: "#FFFFFF"
                  }
                ])
              }
            }
          }
        ]
   };
 _this.myChart.hideLoading();
 _this.myChart.setOption(option, true);
 window.addEventListener("resize", function() {
      _this.myChart.resize();
});
View Code

效果图：

桑基图

直接上代码：可以直接使用，其实就是自己组装了一个data对象是 energylist数组 ，links 为组装好的data数组

  var energy = {
        水: "#0055FF",
        电: "#FF6600",
        气: "#9BCF58",
        办公1: "#53C7C7",
        办公2: "#53C7C7",
        生产1: "#5256BA",
        生产2: "#5256BA",
        黄岛滚筒: "#3770DA",
        天津波轮: "#FB7293"
      };
      var tempData = [
        {
          source: "电",
          target: "黄岛滚筒",
          value: 5
        },
        {
          source: "电",
          target: "黄岛滚筒",
          value: 3
        },
        {
          source: "水",
          target: "黄岛滚筒",
          value: 8
        },
        {
          source: "水",
          target: "黄岛滚筒",
          value: 3
        },
        {
          source: "气",
          target: "黄岛滚筒",
          value: 1
        },
        {
          source: "气",
          target: "黄岛滚筒",
          value: 2
        },
        {
          source: "气",
          target: "黄岛滚筒",
          value: 8
        },
        {
          source: "黄岛滚筒",
          target: "办公1",
          value: 10
        },
        {
          source: "黄岛滚筒",
          target: "生产1",
          value: 8
        },
        {
          source: "电",
          target: "天津波轮",
          value: 8
        },
        {
          source: "电",
          target: "天津波轮",
          value: 4
        },
        {
          source: "水",
          target: "天津波轮",
          value: 8
        },
        {
          source: "水",
          target: "天津波轮",
          value: 2
        },
        {
          source: "气",
          target: "天津波轮",
          value: 7
        },
        {
          source: "气",
          target: "天津波轮",
          value: 5
        },
        {
          source: "天津波轮",
          target: "办公2",
          value: 20
        },
        {
          source: "气",
          target: "生产2",
          value: 13
        }
      ];
      //数据
      var data = [];
      var energylist = [];
      for (var key in energy) {
        energylist.push({ name: key, itemStyle: { color: energy[key] } });
      }
      for (var i = 0; i < tempData.length; i++) {
        var color = new _this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: energy[tempData[i].source]
          },
          {
            offset: 1,
            color: energy[tempData[i].target]
          }
        ]);
        data.push({
          source: tempData[i].source,
          target: tempData[i].target,
          value: tempData[i].value,
          lineStyle: {
            color: color
          }
        });
      }
      var option = {
        title: {
          text: "",
          top: "top",
          left: "35%"
        },
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove"
        },
        series: [
          {
            type: "sankey",
            data: energylist,
            links: data,
            focusNodeAdjacency: "allEdges",
            itemStyle: {
              borderWidth: 1,
              color: "#1b6199",
              borderColor: "#fff"
            },
            lineStyle: {
              curveness: 0.5,
              opaenergy: 0.5
            }
          }
        ]
      };
View Code

效果图：

仪表盘

可以设置刻度标签和刻度样式，设置渐变时也是一样的，可以有两种方法，这里使用了第一种。

 mounted() {
    var _this = this;
    _this.myChart = _this.$echarts.init(_this.$refs.voltageGauge);
    _this.myChart.showLoading();
    var option = {
      tooltip: {
        formatter: "{a} <br/>{b} : {c}%"
      },
      series: [
        {
          name: "电压",
          type: "gauge",
          center: ["20%", "55%"],
          max: 220,
          startAngle: 180,
          endAngle: -0,
          center: ["27%", "50%"], // 默认全局居中
          // radius: '35%',
          detail: { formatter: "{value}V" },
          data: [{ value: 170, name: "V" }],
          axisLine: {
            show: true,
            lineStyle: {
              color: [
                [
                  1,
                  new _this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0.7,
                      color: "#0055FF"
                    },
                    {
                      offset: 0.1,
                      color: "#01058A"
                    }
                  ])
                ]
              ]
            }
          }
        },
        {
          name: "电流",
          type: "gauge",
          center: ["20%", "55%"],
          max: 80,
          startAngle: 180,
          endAngle: -0,
          center: ["75%", "50%"], // 默认全局居中
          // radius: '35%',
          detail: { formatter: "{value}A" },
          data: [{ value: 36, name: "A" }],
          axisLine: {
            show: true,
            lineStyle: {
              color: [
                [
                  1,
                  new _this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0.1,
                      color: "#E7BCF3"
                    },
                    {
                      offset: 0.7,
                      color: "#E062AE"
                    }
                  ])
                ]
              ]
            }
          }
        }
      ]
    };
    setInterval(function() {
      option.series[0].data[0].value = (Math.random() * 220).toFixed(2) - 0;
      option.series[1].data[0].value = (Math.random() * 88).toFixed(2) - 0;
      _this.myChart.setOption(option, true);
    }, 2000);
    _this.myChart.hideLoading();
    _this.myChart.setOption(option, true);
    window.addEventListener("resize", function() {
      _this.myChart.resize();
    });
  }
View Code

效果图：

总结

感觉做渐变时就是想好要哪块区域渐变，然后将color的值设置为渐变的效果，就ok了，这里还绑定了resize，当浏览器窗口变小时，图表也在变小。不过图表设置变色真的好好看。

 

转载于:https://www.cnblogs.com/ichthyo-plu/p/11151325.html

weixin_30413739
关注
Echarts在项目中的使用
北寻北爱
10-22 594
Echarts的基本使用 获取 npm install echarts --save 引入 //main.js import echarts from 'echarts' Vue.prototype.$echarts= echarts 使用 <template> <!--为Echarts准备一个具备宽度的DOM容器--> <div ref='pro...
项目中Echarts组件使用
m0_58147586的博客
11-28 479
项目中使用Echarts的方法
echarts在项目中的使用
weixin_33979363的博客
03-21 294
1.场景 　　在echarts的map中展示数据，项目中有个实验室地图模块，展示重庆所有区县的所拥有的实验室机构，当鼠标点击区县时，会弹出信息框，展示该区县所有的实验室机构以及联系电话列表展示，点击实验室机构名称可跳转到机构详情页面 2.所使用技术 　　echarts的map组件、java的StringBuff拼接地图实验室的json格式数据、加载重庆市区县地图数据的json文件、freem...
在项目中使用 echarts
最爱喝怡宝的博客
02-16 870
1.先在项目中下载 echarts cnpm i echarts --save 2.在 main.js 中 引入 并使用 //引用 echarts import * as echarts from 'echarts'; //使用echarts Vue.prototype.$echarts = echarts; 3.在视图层留下放置可视化图表的盒子，起id名 （注意，这个盒子必须有高度） <div class="charts_box" id="myChart"></div>
ECharts
small_rain_的博客
10-27 1188
转自黑马程序员pink老师 ## 可视化面板介绍 ​ 应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。 ### 01-使用技术 完成该项目需要具备以下知识： - div + css 布局 - flex 布局 - Less - 原生js + jquery 使用 - rem适配 - **echarts基础** ### 02- 案例适配方案 - 设计稿是1920px 1. f...
echarts的项目总结
qq_53721052的博客
11-10 1148
echarts的项目总结
ECharts使用心得
08-02
### ECharts使用心得详解 #### 一、简介 ECharts是一款由百度开发的纯JavaScript的图表库，提供了直观、生动、可交互、可高度个性化定制的数据可视化图表。它支持常规的折线图、柱状图、饼图、散点图等，同时也...
Echarts项目使用总结
hxj_Studio的博客
01-10 580
echarts在React中的搭建方法
如何在项目中使用ECharts
daishu_shu的博客
04-20 2209
文章目录前言一、ECharts介绍二、ECharts使用时的流程步骤1.下载echarts并且引入到你的页面中2.准备一个div盒子3.初始化echarts实例对象4.指定配置项和数据(option)5.将配置项设置给echarts实例对象三、常用的配置总结 前言 提示：这里可以添加本文要记录的大概内容： 这篇文章主要和大家分享ECharts的前世今生和在项目中使用ECharts流程步骤，以及说一下一些ECharts常用的配置 提示：以下是本篇文章正文内容，下面案例可供参考 一、ECharts介绍 常见
Echart图表在项目中如何使用？（前后端详细技术讲解）
ILOVEMYDEAR的博客
11-23 6788
Echart图表在项目中的详细使用 第二章 Echart图表在项目中的详细使用-折线图篇 提示：我们在讲解Echart使用时首先要安装Echart,使用的前端框架时vue,后端时springboot项目或者spring，或者读者不会java,也可以学习，原理时一样的。vue环境的搭建大家可以在csdn上找到教程，我就不在赘述了。 环境安装的详细教程看我的第一章教程。 第一章 echart准备 文章目录Echart图表在项目中的详细使用前言一、项目架构二、进入Echart官网学会自我分析2.1 Echart
ECharts项目小结~
qq_45918426的博客
05-24 555
文章目录项目主页效果页面布局flex三栏布局每个图表的大小设置图表设计设计步骤点击图表跳转 项目主页效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>数据可视化</titl
Echarts初学使用
weixin_44679078的博客
06-12 250
介绍 常见的数据可视化库： D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难) ECharts.js 百度出品的一个开源 Javascript 数据可视化库 Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用 AntV 蚂蚁金服全新一代数据可视化解决方案 等等 Highcharts 和 Echarts 就像是 Office 和 WPS 的关系 ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅
Echarts的使用方法
m0_62988965的博客
03-06 3910
1.安装Echarts npm install echarts 2.引入echarts文件 import * as echarts from "echarts" 3.在组件中发送请求，请求echarts相关数据，并做处理，得到图标所需的数据 4.定义一个容器 5.设置echarts配置option（可参考官网配置，做响应修改） Examples - Apache ECharts 6.初始化图标 将配好的配置放到上面定义的容器中 const E= echarts.init(容器Dom /.
如何使用ECharts
XinChen_的博客
08-12 232
ECharts用法 下载 首先你可以进入ECcharts官网下载 但是不管是源代码，还是完整版，（其他网站上好像是以前的版本，两个镜像我也下载过）都没有使用成功，还折腾了我几个小时！！ 最后从以前写过的代码中找到了，我把它放上来，需要的小伙伴可以直接下载ECharts下载，建一个JS文件，将里面的代码复制一份就行了！简单吧 创建一个简单的ECharts 先引入echarts.js <head...
ECharts介绍及使用方法
zhang_jintao的博客
11-25 350
前面做项目时用到ECharts，今天特此整理一下，作为笔记，同时希望帮助更多人。 首先简单介绍一下，ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开原协议，是一款非常优秀的可视化前端框架。 官网地址：http://echarts.baidu.com/ 首先在官网 选择合适的下载版本 http://echarts.baidu.co...
Echarts的使用
qq_38933412的博客
07-02 757
实例代码：&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;    &lt;meta charset="utf-8"&gt; 
Echarts使用
世代庄少主 髣髴兮若轻云之蔽月,飘飖兮若流风之回雪！
07-08 461
【前言】            面试问了一个Echarts的东西，小编没有用过，于是就照着网上的例子敲了一遍，简单研究了一下。【正文】&lt;!DOCTYPE html&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%"&gt; &lt;head&gt; &lt;meta http-equiv="Co...
ECharts的使用方法
最新发布
m0_55333789的博客
04-13 771
ECharts的使用方法
ECharts使用教程：地图控件与心得分享
"详解ECharts使用心得总结" ECharts是一款由百度开发的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图以及地图等，且支持在各种浏览器和操作系统上运行。在本文中，我们...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值