如何使用在项目中使用echarts

于 2024-03-28 18:36:37 发布
阅读量978 收藏 26
点赞数 24
文章标签： echarts 信息可视化 数据分析
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62639453/article/details/137120126
版权

一、使用echarts的好处和作用

ECharts 是一个强大的数据可视化库，主要用于在网页上创建丰富多彩的交互式图表和地图。一些 ECharts 的好处和作用包括：

好处：

  1. 丰富的图表类型：ECharts 提供了各种常见的图表类型，如折线图、柱状图、饼图、雷达图等，以及地图等特殊类型，能满足不同场景下的数据展示需求。

  2. 高度可定制性：用户可以通过配置选项来调整图表外观、交互方式等，实现个性化的定制化效果。

  3. 交互式：ECharts 支持丰富的交互功能，如数据筛选、数据缩放、图例切换等，让用户可以更直观地与数据进行互动。

  4. 跨平台兼容：ECharts 可以在不同的平台和设备上运行，并支持响应式设计，适配各种屏幕尺寸。

  5. 社区支持：ECharts 拥有庞大的开发者社区，提供了丰富的文档、示例和案例，方便用户学习和解决问题。

作用：

  1. 数据可视化：ECharts 可以帮助用户将复杂的数据通过图表展示出来，提升数据的可视化效果和理解性。

  2. 决策支持：通过直观的图表展示，可以帮助用户更快速地分析数据、发现规律，从而为决策提供支持。

  3. 数据监控：ECharts 可以实时更新数据并展示动态变化，适用于数据监控和实时数据展示的场景。

  4. 报告和演示：ECharts 可以生成美观的图表，适用于报告、演示等需要图形化展示数据的场景。

总的来说，ECharts 是一个功能强大的数据可视化库，能够帮助用户有效地展示和分析数据，提升用户对数据的理解和决策能力。

二、如何使用

1.首先，使用任何第三方的东西，首要的都是导入相关依赖。

Apache ECharts

上面这个是echart官网

有多种安装方式，可以采用cdn的方式引入，或者使用npm包管理工具引入都可以，看你喜欢！

 

这里采用cdn的方式引入：

  

顺便准备一下jquery的js文件，可能echarts也是基于jq写的，俩者缺一不可！ 

复制链接去ctrl+s下载保存就行了！echarts - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 2.准备容器来放echarts展示的东西

<div id="chart1"></div>

一般都使用id来指定，id具有唯一性，不容易造成容器混乱。

基础准备工作已就绪，接下来就是怎么配置使用！

三、基础案例

我们先浅试一下官网的案例！

复制粘贴去体验一下就好了！

<script src="../js/echarts.min.js"></script>
  <script src="../js/jquery.min.js"></script>
<style>
    #chart1,#chart2,#chart3 {
      width: 500px;
      height: 500px;
    }
  </style>
  <body>
    <!-- 基础案例 -->
    <div id="chart1"></div>
  </body>
// 第一种
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("chart1"));
  // 绘制图表
  myChart.setOption({
    title: {
      text: "ECharts 的基础使用",
    },
    tooltip: {},
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  });

 四、更换option配置项案例

打卡官网示例，看需要使用哪个，这里随机挑一个做演示。

Examples - Apache ECharts

比如我看上了这个，左边有配置代码，也是复制粘贴的回事！全部复制过来。 

 

<body>
    <!-- 更换option配置项案例 -->
    <div id="chart2"></div>
  </body>
//   第二种
  // 基于准备好的dom，初始化echarts实例
  var myEcharts2 = echarts.init(document.getElementById("chart2"));
  // 绘制图表
  var option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "5%",
      left: "center",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 10,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
          { value: 484, name: "Union Ads" },
          { value: 300, name: "Video Ads" },
        ],
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myEcharts2.setOption(option);

五、使用echart集的案例

有一个基于echarts的图表集网站，里面有更多的示例，比较丰富，更能满足需要。宝子网站。

首页 - ECharts图表集,ECharts demo集,echarts gallery社区,Make A Pie,分享你的可视化作品isqqw.com

挑 一个喜欢的，用得上的。

以这个做演示，点进去，也是复制代码的事情！

<body>
    <!-- 使用echart集的案例 -->
    <div id="chart3"></div>
  </body>
//   第三种
  // 基于准备好的dom，初始化echarts实例
  var myEcharts3 = echarts.init(document.getElementById("chart3"));

  let indicatorList = [
    {
      name: "机房1",
    },
    {
      name: "机房2",
    },
    {
      name: "机房3",
    },
    {
      name: "机房4",
    },
    {
      name: "机房5",
    },
  ];
  var option2 = {
    backgroundColor: "rgb(13,34,73)",
    color: ["#0290ff", "#ffe533", "#ff4d4d", "#06f5bc"],
    tooltip: {
      show: false, // 弹层数据去掉
    },
    legend: {
      data: [
        {
          name: "告警",
          icon: "rect",
          itemStyle: {
            color: "#ff4d4d",
            borderWidth: 0, // 设置图例图标的颜色
          },
        },
        {
          name: "预警",
          icon: "rect",
          itemStyle: {
            color: "#0290ff",
            borderWidth: 0, // 设置图例图标的颜色
          },
        },
        {
          name: "缺陷",
          icon: "rect",
          itemStyle: {
            color: "#ffe533",
            borderWidth: 0, // 设置图例图标的颜色
          },
        },
        {
          name: "巡检",
          icon: "rect",
          itemStyle: {
            color: "#06f5bc",
            borderWidth: 0, // 设置图例图标的颜色
          },
        },
      ],

      top: 100,
      show: true,
      y: "1",
      center: 0,
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 26,
      z: 3,
      // orient: 'horizontal',
      textStyle: {
        fontSize: 14,
        color: "#edf8ff",
      },
    },
    radar: {
      center: ["50%", "50%"], // 外圆的位置
      radius: "55%",
      name: {
        textStyle: {
          color: "#fff",
          fontSize: 16,
          fontWeight: 400,
          fontFamily: "PingFangSC-Regular,PingFang SC",
          fontStyle: "normal",
        },
      },
      // TODO:
      indicator: indicatorList,
      splitArea: {
        // 坐标轴在 grid 区域中的分隔区域，默认不显示。
        show: true,
        areaStyle: {
          // 分隔区域的样式设置。
          color: ["rgba(255,255,255,0)"], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
        },
      },
      axisLine: {
        // 指向外圈文本的分隔线样式
        lineStyle: {
          color: "rgba(255,255,255,0)",
        },
      },
      splitLine: {
        lineStyle: {
          type: "solid",
          color: "#0ac8ff", // 分隔线颜色
          width: 2, // 分隔线线宽
        },
      },
    },
    series: [
      {
        type: "radar",
        data: [
          {
            value: [50, 60, 40, 10, 0],
            name: "告警",
            areaStyle: {
              normal: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(255, 56, 56, 0.14)", // 0% 处的颜色
                    },
                    {
                      offset: 0.15,
                      color: "rgba(255, 56, 56, 0.14)", // 100% 处的颜色
                    },
                    {
                      offset: 0.75,
                      color: "rgba(255, 56, 56, 0.4)", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255, 56, 56, 0.8)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            symbolSize: [6, 6],
            lineStyle: {
              //边缘颜色
              //  width: 0
              color: "rgba(255, 56, 56, 0.8)",
              // shadowBlur:8,
              // shadowColor:'#ff3838'
            },
            itemStyle: {
              color: "#fff",
              borderColor: "#ff6565",
              borderWidth: 1,
              shadowBlur: 8,
              shadowColor: "#ff6565",
            },
          },
          {
            value: [80, 80, 80, 70, 60],
            name: "预警",
            areaStyle: {
              normal: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(0,194,255, 0.14)", // 0% 处的颜色
                    },
                    {
                      offset: 0.15,
                      color: "rgba(0,194,255, 0.14)", // 100% 处的颜色
                    },
                    {
                      offset: 0.75,
                      color: "rgba(0,194,255, 0.4)", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0,194,255, 0.8)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            symbolSize: [6, 6],
            lineStyle: {
              //边缘颜色
              //  width: 0
              color: "rgba(0, 194, 255, 0.8)",
              // shadowBlur:8,
              // shadowColor:'#ff3838'
            },
            itemStyle: {
              color: "#fff",
              borderColor: "#00c8ff",
              borderWidth: 1,
              shadowBlur: 8,
              shadowColor: "#00c8ff",
            },
          },
          {
            value: [50, 40, 70, 50, 60],
            name: "缺陷",
            areaStyle: {
              normal: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(255, 220, 56, 0.14)", // 0% 处的颜色
                    },
                    {
                      offset: 0.15,
                      color: "rgba(255, 220, 56, 0.14)", // 100% 处的颜色
                    },
                    {
                      offset: 0.75,
                      color: "rgba(255, 220, 56, 0.4)", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255, 220, 56, 0.8)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            symbolSize: [6, 6],
            lineStyle: {
              //边缘颜色
              //  width: 0
              color: "rgba(255, 220, 56, 0.8)",
              // shadowBlur:8,
              // shadowColor:'#ff3838'
            },
            itemStyle: {
              color: "#fff",
              borderColor: "#cdbd3e",
              borderWidth: 1,
              shadowBlur: 8,
              shadowColor: "#cdbd3e",
            },
          },

          {
            value: [0, 0, 10, 30, 70],
            name: "巡检",
            areaStyle: {
              normal: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(13, 248, 172, 0.14)", // 0% 处的颜色
                    },
                    {
                      offset: 0.15,
                      color: "rgba(13, 248, 172, 0.14)", // 100% 处的颜色
                    },
                    {
                      offset: 0.75,
                      color: "rgba(13, 248, 172, 0.4)", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(13, 248, 172, 0.8)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            symbolSize: [6, 6],
            lineStyle: {
              //边缘颜色
              //  width: 0
              color: "rgba(13, 248, 172, 0.8)",
              // shadowBlur:8,
              // shadowColor:'#ff3838'
            },
            itemStyle: {
              color: "#fff",
              borderColor: "#00ffb4",
              borderWidth: 1,
              shadowBlur: 8,
              shadowColor: "#00ffb4",
            },
          },
        ],
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myEcharts3.setOption(option2);

实现的样子：

 

 

 

六、自定义配置

如何使用人家的不满足，需要自定义一些样式信息和展示的信息，就要参考官方文档进行修改。

Documentation - Apache ECharts 

还可以在这里直接改代码看效果。

 七、demo全部代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="../js/echarts.min.js"></script>
  <script src="../js/jquery.min.js"></script>
  <style>
    #chart1,
    #chart2,
    #chart3 {
      width: 500px;
      height: 500px;
    }
  </style>
  <body>
    <!-- 基础案例 -->
    <div id="chart1"></div>
    <!-- 更换option配置项案例 -->
    <div id="chart2"></div>
    <!-- 使用echart集的案例 -->
    <div id="chart3"></div>
  </body>
</html>

<script>
  // 第一种
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById("chart1"));
  // 绘制图表
  myChart.setOption({
    title: {
      text: "ECharts 的基础使用",
    },
    tooltip: {},
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  });

  //   第二种
  // 基于准备好的dom，初始化echarts实例
  var myEcharts2 = echarts.init(document.getElementById("chart2"));
  // 绘制图表
  var option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "5%",
      left: "center",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 10,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
          { value: 484, name: "Union Ads" },
          { value: 300, name: "Video Ads" },
        ],
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myEcharts2.setOption(option);

  //   第三种
  // 基于准备好的dom，初始化echarts实例
  var myEcharts3 = echarts.init(document.getElementById("chart3"));

  let indicatorList = [
    {
      name: "机房1",
    },
    {
      name: "机房2",
    },
    {
      name: "机房3",
    },
    {
      name: "机房4",
    },
    {
      name: "机房5",
    },
  ];
  var option2 = {
    backgroundColor: "rgb(13,34,73)",
    color: ["#0290ff", "#ffe533", "#ff4d4d", "#06f5bc"],
    tooltip: {
      show: false, // 弹层数据去掉
    },
    legend: {
      data: [
        {
          name: "告警",
          icon: "rect",
          itemStyle: {
            color: "#ff4d4d",
            borderWidth: 0, // 设置图例图标的颜色
          },
        },
        {
          name: "预警",
          icon: "rect",
          itemStyle: {
            color: "#0290ff",
            borderWidth: 0, // 设置图例图标的颜色
          },
        },
        {
          name: "缺陷",
          icon: "rect",
          itemStyle: {
            color: "#ffe533",
            borderWidth: 0, // 设置图例图标的颜色
          },
        },
        {
          name: "巡检",
          icon: "rect",
          itemStyle: {
            color: "#06f5bc",
            borderWidth: 0, // 设置图例图标的颜色
          },
        },
      ],

      top: 100,
      show: true,
      y: "1",
      center: 0,
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 26,
      z: 3,
      // orient: 'horizontal',
      textStyle: {
        fontSize: 14,
        color: "#edf8ff",
      },
    },
    radar: {
      center: ["50%", "50%"], // 外圆的位置
      radius: "55%",
      name: {
        textStyle: {
          color: "#fff",
          fontSize: 16,
          fontWeight: 400,
          fontFamily: "PingFangSC-Regular,PingFang SC",
          fontStyle: "normal",
        },
      },
      // TODO:
      indicator: indicatorList,
      splitArea: {
        // 坐标轴在 grid 区域中的分隔区域，默认不显示。
        show: true,
        areaStyle: {
          // 分隔区域的样式设置。
          color: ["rgba(255,255,255,0)"], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
        },
      },
      axisLine: {
        // 指向外圈文本的分隔线样式
        lineStyle: {
          color: "rgba(255,255,255,0)",
        },
      },
      splitLine: {
        lineStyle: {
          type: "solid",
          color: "#0ac8ff", // 分隔线颜色
          width: 2, // 分隔线线宽
        },
      },
    },
    series: [
      {
        type: "radar",
        data: [
          {
            value: [50, 60, 40, 10, 0],
            name: "告警",
            areaStyle: {
              normal: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(255, 56, 56, 0.14)", // 0% 处的颜色
                    },
                    {
                      offset: 0.15,
                      color: "rgba(255, 56, 56, 0.14)", // 100% 处的颜色
                    },
                    {
                      offset: 0.75,
                      color: "rgba(255, 56, 56, 0.4)", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255, 56, 56, 0.8)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            symbolSize: [6, 6],
            lineStyle: {
              //边缘颜色
              //  width: 0
              color: "rgba(255, 56, 56, 0.8)",
              // shadowBlur:8,
              // shadowColor:'#ff3838'
            },
            itemStyle: {
              color: "#fff",
              borderColor: "#ff6565",
              borderWidth: 1,
              shadowBlur: 8,
              shadowColor: "#ff6565",
            },
          },
          {
            value: [80, 80, 80, 70, 60],
            name: "预警",
            areaStyle: {
              normal: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(0,194,255, 0.14)", // 0% 处的颜色
                    },
                    {
                      offset: 0.15,
                      color: "rgba(0,194,255, 0.14)", // 100% 处的颜色
                    },
                    {
                      offset: 0.75,
                      color: "rgba(0,194,255, 0.4)", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0,194,255, 0.8)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            symbolSize: [6, 6],
            lineStyle: {
              //边缘颜色
              //  width: 0
              color: "rgba(0, 194, 255, 0.8)",
              // shadowBlur:8,
              // shadowColor:'#ff3838'
            },
            itemStyle: {
              color: "#fff",
              borderColor: "#00c8ff",
              borderWidth: 1,
              shadowBlur: 8,
              shadowColor: "#00c8ff",
            },
          },
          {
            value: [50, 40, 70, 50, 60],
            name: "缺陷",
            areaStyle: {
              normal: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(255, 220, 56, 0.14)", // 0% 处的颜色
                    },
                    {
                      offset: 0.15,
                      color: "rgba(255, 220, 56, 0.14)", // 100% 处的颜色
                    },
                    {
                      offset: 0.75,
                      color: "rgba(255, 220, 56, 0.4)", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255, 220, 56, 0.8)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            symbolSize: [6, 6],
            lineStyle: {
              //边缘颜色
              //  width: 0
              color: "rgba(255, 220, 56, 0.8)",
              // shadowBlur:8,
              // shadowColor:'#ff3838'
            },
            itemStyle: {
              color: "#fff",
              borderColor: "#cdbd3e",
              borderWidth: 1,
              shadowBlur: 8,
              shadowColor: "#cdbd3e",
            },
          },

          {
            value: [0, 0, 10, 30, 70],
            name: "巡检",
            areaStyle: {
              normal: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(13, 248, 172, 0.14)", // 0% 处的颜色
                    },
                    {
                      offset: 0.15,
                      color: "rgba(13, 248, 172, 0.14)", // 100% 处的颜色
                    },
                    {
                      offset: 0.75,
                      color: "rgba(13, 248, 172, 0.4)", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(13, 248, 172, 0.8)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            symbolSize: [6, 6],
            lineStyle: {
              //边缘颜色
              //  width: 0
              color: "rgba(13, 248, 172, 0.8)",
              // shadowBlur:8,
              // shadowColor:'#ff3838'
            },
            itemStyle: {
              color: "#fff",
              borderColor: "#00ffb4",
              borderWidth: 1,
              shadowBlur: 8,
              shadowColor: "#00ffb4",
            },
          },
        ],
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myEcharts3.setOption(option2);
</script>

以上就是使用过程！

～蓝桉
关注
  • 24
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts在项目中的应用
surge
07-08 575
背景: 1.目前想做一个API自动化测试的平台 2.首页的展示希望用数据进行说明 2.1 echart Echarts--商业级数据图表 商业级数据图表，它是一个纯JavaScript的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。 Echarts支持的图表？　 折线图（区域图）、柱状图（条...
jsp中使用echarts示例
02-20
jsp中使用echarts包括echarts的饼图，柱状图，折线图等等
利用Echarts制作地图（一）
热门推荐
ThinkingInGIS的博客
06-25 6万+
从本篇开始，将用三篇文章说明如何利用Echarts制作自定义区域的单图例、多图例及动态加载地图所需数据。 文本作为开篇，将简单介绍如何利用echarts制作地图。
带时间轴的指标监控柱状图
09-20 1258
function getData(percent) { return [{ value: percent, name: percent, }, { value: 1 - percent, label: { show: false }, labelLine: { normal: { show: false }...
如何在项目中使用ECharts
daishu_shu的博客
04-20 2087
文章目录前言一、ECharts介绍二、ECharts使用时的流程步骤1.下载echarts并且引入到你的页面中2.准备一个div盒子3.初始化echarts实例对象4.指定配置项和数据(option)5.将配置项设置给echarts实例对象三、常用的配置总结 前言 提示：这里可以添加本文要记录的大概内容： 这篇文章主要和大家分享ECharts的前世今生和在项目中使用ECharts流程步骤，以及说一下一些ECharts常用的配置 提示：以下是本篇文章正文内容，下面案例可供参考 一、ECharts介绍 常见
前端echarts在项目中使用技巧总结
qq_41974250的博客
11-07 401
条形图 1、红框内的设置 legend: { textStyle:{ fontSize:15, color:'#fff', padding:[0,60,0,0], }, }, 2、设置图表的前后左边的边距 grid:{ top: '12%', left: '5%', right: '0%', bottom: '20%', }, 3、设置横坐标字段名的颜色 xAxis:
在vue中使用echarts
做笔记\记录遇到的程序bug
03-04 5万+
1、安装
在项目中引用echarts并使用样例
最新发布
04-10
在项目中引用echarts并使用样例
详解Vue中使用Echarts的两种方式
08-27
主要介绍了Vue中使用Echarts的两种方式,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
在项目vue中使用echarts的操作步骤
10-14
主要介绍了在项目vue中使用echarts的操作步骤，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
项目实战echarts 在微信小程序中使用
04-17
项目实战echarts 在微信小程序中使用
springboot项目的echarts简单使用
06-14
springboot项目的echarts简单使用
在Vue项目中使用Typescript的实现
10-15
主要介绍了在Vue项目中使用Typescript的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在vue中添加Echarts图表的基本使用教程
08-28
虽然老早就看过很多echarts的例子， 但自己接触的项目中一直都没有真正用到过，直到最近才开始真正使用，下面这篇文章主要给大家介绍了关于在vue中添加Echarts图表的基本使用教程，文中通过示例代码介绍的非常详细，...
在reactnative中使用echarts
08-10
要在 react-native 上使用 echarts 的图表库，目前方法主要是使用 react-native 的 webview 利用网页的形式加载 echarts 的图形。 本项目尽量使用少的代码实现本功能。
在项目中使用 echarts
最爱喝怡宝的博客
02-16 808
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
致力于成为顶尖的架构师
12-30 2409
首先介绍项目背景：    把如下图所示，把这个做成表格然后打印出来。    点击显示图表出现如图以下的界面： 1、首先导入echarts所需要的js文件，css文件。 将echarts所需要的东西考进来（图上的js文件并不是所有的都需要。） 2、引入以下文件 药品统计 --> 3、js代码： function q
echarts 项目使用总结
zxh的专栏
04-13 5513
echarts项目使用总结在各种网站分享的echrts使用方式都是只给出写一个简单的demo，数据都是伪数据，而我将总结在真实的项目过程中使用echarts的开发过程以及遇到的问题。 定义基于html5 Canvas，是一个纯Javascript图表库 echrts原理1. echarts是基于javaScript开发的，涵盖js、html、css的等技术 2. 在技术上主要是采用html5的can

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值