vue项目中引入HTML静态页面,vue项目中引入离线百度地图
本文主要介绍vue项目中ECharts的介绍，它是一个功能强大的绘图插件。在Vue项目中，我们经常可以参考ECharts来完成一些图表的绘制；下面介绍的是ECharts在vue项目中的参考和使用，有一定的参考价值，有需要的小伙伴可以参考一下。
:
目录
1.安装2。介绍3。使用4。根据需要介绍ECharts图表和组件。
1.安装
使用以下命令通过npm安装ECharts
npm安装电子图表-保存
2.引入
安装完成后，可以引入所有的echarts，这样我们就可以在这个页面上使用echarts的所有组件；介绍代码如下：
从“echarts”导入*作为e charts；
3.使用
引入完毕之后，我们可通过echarts提供的接口画出对应的图表，使用方法如下：
模板
差异
“echart”
id=我的图表
:style={ float: left ，宽度： 100% ，高度： 400px }
/div
/模板
脚本
从“echarts”导入*作为e charts；
导出默认值{
data() {
返回{
姓名：“张学”
Xdata: [2020-02 ， 2020-03 ， 2020-04 ， 2020-05]，//横坐标数据
Y: [30，132，80，134]//纵坐标数据对应横坐标。
};
},
已安装(){
this . initecharts()；
},
方法：{
initEcharts() {
常量选项={
标题：{
文本：“电子海图简介示例”
},
工具提示：{}，
图例：{
数据：[销售]
},
xAxis: {
数据：[衬衫，毛衣，雪纺衫，裤子，高跟鞋，袜子]
},
yAxis: {}，
系列：[
{
名称：销售量，
类型：条形图，//类型是直方图。
数据：[5，20，36，10，10，20]
}
]
};
const myChart=echarts . init(document . getelementbyid( myChart )；//图标初始化
myChart.setOption(选项)；//呈现页面
//根据屏幕大小调整图表
window . addevent listener( resize ，()={
mychart . resize()；
});
}
}
};
/脚本
效果如下：
4.按需引入 ECharts 图表和组件
上面的代码会导入所有ECharts中的所有图表和组件，但是如果不想导入所有组件，也可以使用ECharts提供的接口来封装必要的组件。
//介绍了echarts的核心模块，为echarts提供了必要的接口。
从“echarts/core”导入*作为e charts；
//引入直方图，带图表后缀。
从“电子图表/图表”中导入{条形图}；
//介绍提示框、标题、直角坐标系、数据集、内置数据转换器组件，组件后缀为组件。
导入{
标题组件，
工具提示组件，
网格组件，
DatasetComponent，
DatasetComponentOption，
转换组件
}来自‘e charts/components’；
//自动标签布局、全局过渡动画等功能
从“echarts/features”导入{ LabelLayout，universal transition }；
//引入画布渲染器。注意，引入CanvasRenderer或SVGRenderer是一个必要的步骤。
从“echarts/renderers”导入{ canvas renderer }；
//注册所需的组件
echarts.use([
标题组件，
工具提示组件，
网格组件，
DatasetComponent，
转换组件，
条形图，
LabelLayout，
通用转换，
CanvasRenderer
]);
//接下来的使用和之前一样，初始化图表，设置配置项。
var myChart=echarts . init(document . getelementbyid( main ))；
myChart.setOption({
//.
});
需要注意的是，为了保证打包体积最小，ECharts在按需引入时不再提供任何渲染器，所以需要选择引入CanvasRenderer或SVGRenderer作为渲染器。这样做的好处是，如果只需要使用svg渲染模式，打包后的结果不会包含不必要的CanvasRenderer模块。
关于在Vue项目中引入ECharts的这篇文章到此为止。有关Vue对ECharts的介绍的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。