如何在页面中使用下载好的echarts主题绘制想要的图表

echarts初探

• 在制作一个flask项目时初次尝试使用echarts绘制柱状图和折线图
• ECharts（Enterprise Charts）是一个开源数据可视化库，支持常见的图表类型，包括折线图、柱状图、饼图、散点图、雷达图、地图等。
• 用户可以通过设置图表的样式、数据、坐标轴、标签、提示框等来定制图表的展示效果。ECharts 还支持响应式设计，可以适应不同设备和屏幕尺寸，实现了良好的移动端适配。
• ECharts 提供了多种方式来集成到项目中，包括直接引入 JavaScript 文件、使用 AMD/CMD 模块加载器、通过 npm 安装等。这里我选择直接引入js文件

1.下载自定义主题

echarts官网->资源->主题构建工具，调节左侧构造出想要的主题样式后下载主题
注意这里注册的主题名字为customed，也可以在代码中自己修改

2.导入echarts相关文件

需要绘制图表的html页面

• <script src="../static/js/echarts.js"></script>Echarts的核心库文件
• <script src="../static/js/mychartconfig.js"></script>步骤1中下载的主题文件

3.创建用于显示图表的元素

在html文件中创建一个元素用于放置图表，例如<div id="mychart"></div> 可以设置它的宽高

4.编写绘制图表代码

• 创建JS脚本块

• echarts.init()初始化图表实例并绑定步骤3的元素（可以看作作为图表的容器），第一个参数是一个DOM，第二个参数是主题名

  var myChart = echarts.init(document.getElementById('mychart'), 'customed')
  

• 设置图标配置项

     var option = {
    // 配置项...
    xAxis: {
      type: 'category',
      data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      type: 'bar',
      data: [10, 20, 30, 40, 50]
    }]
  };
  

• 应用配置项

   myChart.setOption(option);
  

应用：通过API接口获得数据绘制具有三个图例(series)的echarts图表

步骤

• fetch发送GET请求
• .then响应体类型从json转换为对象
• .then对象（数据）用于绘制图表，编写图表绘制代码
• 可以设置监听窗口大小从而改变图标大小

注意事项

• 注意：横纵坐标data数据类型一定是数组，且数组的每一个元素一定是一个元素，不能再是数组
• 注意：图例legend的data每个元素一定和series里的name一一对应

额外设置

• 折线图设置为堆叠面积样式，需要在每个series中添加stack，相同的stack会堆叠在一起
• 鼠标悬停显示数据信息，使用tooltip
• 根据元素容器调整图表尺寸，使用grid

示例

效果图

chart1柱状图

fetch('/api/chart1data')
                  .then(response => response.json())
                  .then(data => {

                      // 创建图表实例
                      var chart1 = echarts.init(document.getElementById('chart1'),'essos');

                      //监听页面的 resize 事件获取浏览器大小改变的事件，然后调用 echartsInstance.resize()改变图表的大小。
                      window.addEventListener('resize', function () {
                          chart1.resize();
                      });


                      // 使用数据配置图表
                      var option = {
                          //图例
                          legend: {
                              show: true,
                              data: ['虚拟', '实体', '文本']
                          },
                          //grid 可以控制图表的位置和大小，并且可以根据容器的尺寸进行自适应调整
                          grid: {
                              containLabel: true, // 内部图案完全包含在容器中
                              left: '3%', // 调整左边距
                              right: '3%', // 调整右边距
                              top: '10%', // 调整上边距
                              bottom: '3%' // 调整下边距
                          },
                          //鼠标悬停在图表上时显示数据信息
                          tooltip: {
                              trigger: 'axis', // 设置触发类型为坐标轴轴线触发
                              axisPointer: {
                                  type: 'shadow' // 设置坐标轴指示器的类型为阴影指示器
                              }
                          },
                          xAxis: {
                              type: 'category',
                              data: data.date,
                              axisLabel: {
                                  interval: 0, // 横轴标签全部显示
                                  rotate: 30
                              }
                          },
                          yAxis: {
                              type: 'value',
                              axisLabel: {
                                  formatter: '{value}' // 设置刻度标签格式
                              },
                              splitLine: {
                                  show: true // 显示纵坐标轴的分割线
                              },
                              axisTick: {
                                  show: true // 显示纵坐标轴的刻度线
                              },
                              min: 0, // 设置纵坐标刻度的最小值
                              max: 40, // 设置纵坐标刻度的最大值
                              {#interval: 10 // 设置纵坐标刻度的间隔#}
                              splitNumber: 5 // 设置纵轴刻度数量

                          },
                          series: [
                              {
                                  name:'虚拟',
                                  type: 'bar',
                                  data: data.dfcount
                              },
                               {
                                  name:'实体',
                                  type: 'bar',
                                  data: data.drcount
                              },
                               {
                                  name:'文本',
                                  type: 'bar',
                                  data: data.dtcount
                              }
                          ]
                      };

                      // 应用配置项到图表实例
                     chart1.setOption(option);

  				});

chart2折线图(堆叠面积图)

	                fetch('/api/chart2data')
                    .then(response => response.json())
                    .then(data => {

                        // 创建图表实例
                        var chart2 = echarts.init(document.getElementById('chart2'),'essos');

                        window.addEventListener('resize', function () {
                            chart2.resize();
                        });

                        // 使用数据配置图表
                        var option = {
	                        //图例
                            legend: {
                                show: true,
	                            data: ['高度危险数目', '相对危险数目', '总消息数目']
                            },
                            grid: {
                                containLabel: true, // 内部图案完全包含在容器中
                                left: '3%', // 调整左边距
                                right: '3%', // 调整右边距
                                top: '10%', // 调整上边距
                                bottom: '3%' // 调整下边距
                            },
                            tooltip: {
                                trigger: 'axis', // 设置触发类型为坐标轴轴线触发
                                axisPointer: {
                                    type: 'line' // 设置坐标轴指示器的类型为一条线
                                }
                            },
                            xAxis: {
                                type: 'category',
                                data: data.date,
                                axisLabel: {
                                    interval: 0, // 横轴标签全部显示
	                                rotate: 30
                                }
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value}' // 设置刻度标签格式
                                },
                                splitLine: {
                                    show: true // 显示纵坐标轴的分割线
                                },
                                axisTick: {
                                    show: true // 显示纵坐标轴的刻度线
                                },
                                min: 0, // 设置纵坐标刻度的最小值
                                max: '300', // 设置纵坐标刻度的最大值
                                {#interval: 10, // 设置纵坐标刻度的间隔#}
	                            splitNumber: 10 // 设置纵轴刻度数量

                            },
                            series: [
                                {
                                    name:'高度危险数目',
                                    type: 'line',
                                    stack: 'Total1',
                                    areaStyle: {},
                                    emphasis: {
                                        focus: 'series'
                                    },
	                                data: data.hdangercount
                                },
	                             {
                                    name:'相对危险数目',
                                    type: 'line',
                                     stack: 'Total2',
                                     areaStyle: {},
                                     emphasis: {
                                         focus: 'series'
                                     },
                                    data: data.ldangercount
                                },
	                             {
                                    name:'总消息数目',
                                    type: 'line',
                                    stack: 'Total3',
		                             areaStyle: {},
                                     emphasis: {
                                         focus: 'series'
                                     },
                                    data: data.daycount
                                }
                            ]
                        };

                        // 应用配置项到图表实例
                       chart2.setOption(option);

					});