yarn add echarts安装失败如何安装echarts

转载

小屁孩 2024-01-30 23:40:08

文章标签 可视化 tableau echarts html 官网 文章分类 Yarn 大数据

第一次接触echarts概念是因为想要在tableau上实现仪表盘功能，tableau自身的功能不能支持仪表盘的动态预警建立，于是就了解到了echarts的外置组件导入URL跳转功能。
本篇文章简述echarts的安装及入门操作，以及对应的搭载工具。

echarts的安装

直接在百度搜索echarts官网选择下载

yarn add echarts安装失败如何安装echarts_官网

下载方式有很多种：从镜像网站下载源码（直接下载源码文件），从 GitHub 下载编译产物(GitHub下载开源文件），从 npm 安装（需要安装npm，使用npm install echarts），因为博主需要的功能有限，所以建议选择在线定制，选择自己需要的模块下载：

yarn add echarts安装失败如何安装echarts_echarts_02

可以选择相应的模块：

yarn add echarts安装失败如何安装echarts_html_03

此时，下载的目录需要选择一下后续我们想要做图的目录文件，在此我把它放在D盘echart目录新建的Js文件夹下

yarn add echarts安装失败如何安装echarts_可视化_04

Brackets的安装

现在我们有了echarts的相关脚本，需要一个搭载它运行的东西，在此我们选择前端的开发软件都可以，博主选用了brackets，此处仅做参考。

同理百度brackets官网可以下载

yarn add echarts安装失败如何安装echarts_可视化_05

echarts的入门使用

首先打开brackets，选择文件中的打开目录，选择我们之前的目标文件夹，也就是echarts的.js文件存放的文件夹

yarn add echarts安装失败如何安装echarts_tableau_06

右键左区域，选择新建文件，重命名为new.html（不加.html会不能运行，因为我们现在用的是H5的方式来跑）

yarn add echarts安装失败如何安装echarts_echarts_07

echarts官网有实例的展示，其中有各个图像的脚本，此处选用提供的练习脚本
链接

此时脚本为：

<html>  
  <head>
    <script src="echarts.min.js"></script>
  </head>  
  <body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
     // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '未来一周气温变化'         
        },
        tooltip: {},
        legend: {},
        toolbox: {},      
        xAxis: [{         
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        }],
        yAxis: { },
        series: [{
          name: '最高气温',
          type: 'line',
          data: [11, 11, 15, 13, 12, 13, 10]          
        },
        {
          name: '最低气温',
          type: 'line',
          data: [1, -2, 2, 5, 3, 2, 0]        
        }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
     //默认是合并原数据，加上true表示不合并配置，否则原数据依然存在图表上
　　　//myChart.setOption(option, true);　
</script>
  </body>
</html>

yarn add echarts安装失败如何安装echarts_tableau_08