vue项目中引入echarts

àì夳堔傛蜴生んèń 2022-09-10 02:14 361阅读 0赞

关于如何搭建vue项目，引入vue-router和vuex。  
请移步  
[vue项目中引入vue-router][vue_vue-router]

[vue项目中引入vuex][vue_vuex]

本章着重介绍对于echarts的相关引入

### 引入Echarts制作图表 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_20_color_FFFFFF_t_70_g_se_x_16]

> 获取，安装echarts  
> 在html 设置一个容器  
> 调用echarts.init方法进行初始化  
> 调用初始化的实例的setOption来配置数据

npm install echarts --save

//echarts容器
    <div id="myChart" :style="{ width: '600px', height: '600px' }"></div>

//获取以上的mychart 节点
    let myChart = this.$echarts.init(document.getElementById("myChart"));

> https://echarts.apache.org/examples/zh/index.html echarts官网示例的demo  
> 选取一个设置option

var option = { 
            xAxis: { 
              type: "category",
              data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            },
            yAxis: { 
              type: "value",
            },
            series: [
              { 
                data: [150, 230, 224, 218, 135, 147, 260],
                type: "line",
              },
            ],
          };
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);

以达到option数据提供的图形效果

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_20_color_FFFFFF_t_70_g_se_x_16 1]

[vue_vue-router]: https://blog.csdn.net/qq_43277404/article/details/120053734?spm=1001.2014.3001.5501
[vue_vuex]: https://blog.csdn.net/qq_43277404/article/details/120059026?spm=1001.2014.3001.5501
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/520d93b0302f45c5a084eb0c9f0a08b7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5YmN56uv5omO5ZWk_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/892b58153f3f4c35a1c3eebab2b7b296.png