vue+echarts,前端echarts如何在vue中使用
这篇文章主要为大家详细介绍了原生统计图和武埃恰尔的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
目录
原生电子海图1 .安装2.引用3.基础3.1系列。类型3.2系列。数据3.3系列。数据3.4电子图表常用的样式4.柱状图5.折线图6.饼状图武埃恰尔总结
原生echart
（下方有vue-echart)
官网文档https://echarts.apache.org/zh/index.html优点：方便修改
1.安装
新公共管理安装电子图表-保存
2.引用
从"电子海图"//中导入*作为电子图表局部或全局定义Vue.prototype.$echarts=echarts
3.基础
3.1 series.type
包括：行（折线图)、酒吧（条形图)、馅饼（饼图)、分散（散点图)、图形（图形图)、树（树状图)等
3.2 series.data
在每个系列中声明：选项
3.3 series.data
展示包括这些组件：xAxis(笛卡尔坐标系的x轴)、亚西斯（笛卡尔坐标系的y轴)、网格（笛卡尔坐标系的底板)、angleAxis(极坐标系的角度轴),半径轴（极坐标系的半径轴),极地（极坐标系的底板)，地理(地理坐标系),数据缩放（改变数据显示范围的组件)，visualMap(指定视觉对象的组件)映射),工具提示（工具提示组件)、工具箱（工具箱组件)、系列
3.4 ECharts 常用的样式
如阴影、不透明度、颜色、边框颜色、边框宽度等，由项目类型串联设置。
项目样式：{
//阴影大小
暗影模糊：200,
//阴影的水平偏移
shadowOffsetX: 0，
//阴影的垂直偏移
shadowOffsetY: 0，
//阴影颜色
阴影颜色： rgba(0，0，0，0.5)
}
4.柱状图
代码示例
//div区域
div id= bar style= width:600 px；高度：400像素；/div
//配置样式
方法：{
barEcharts () {
var myChart=this .$ e图表。init(文档。getelementbyid( bar ))
//配置图表
定义变量选项={
标题：{
文本： 标题
},
//提示框
工具提示：{},
图例：{
数据：[]
},
//x轴显示种类
xAxis: {
数据：[种类一, 种类二, 种类三, 种类四, 种类五, 种类六]
},
//y轴可填数值等
亚西斯：{
},
系列：[{
名称： 销量，
类型："条形",
//y轴数值
数据：[5,
{
价值：20,
项目样式：{
颜色： #FFB5C5
}
}, 36, 10, 10, 20]
}]
}
myChart.setOption(选项)
}
}
//设置
已安装(){
this.barEcharts()
}
显示
5.折线图
示例代码
//div
div id= line style= width:600 px；高度：400像素；/div
//选项配置
lineEcharts () {
var myChart=this .$ e图表。init(文档。getelementbyid( line ))
//配置图表
定义变量选项={
标题：{
文本："堆叠线"
},
工具提示：{
触发器："轴"
},
图例：{
数据：[电子邮件,联盟广告]
},
//笛卡尔坐标系的底板
网格：{
左："3%",
对："4%",
底部："3%",
containLabel: true
},
//工具框
工具箱：{
功能：{
saveAsImage: {}
}
},
xAxis: {
类型："类别",
边界差距：假，
数据：[周一,周二,周三,周四， Fri ，周六,周日]
},
亚西斯：{
类型："值"
},
系列：[
//线一
{
姓名：电子邮件，
类型："行",
堆栈："总计",
数据：[120,132,101,134,90,230,210]
},
//线二
{
名称：联盟广告，
类型："行",
堆栈："总计",
数据：[220,182,191,234,290,330,310]
}
]
}
myChart.setOption(选项)
}
//设置
已安装(){
this.lineEcharts()
}
显示
6.饼状图
示例代码
//div
div id= pie style= width:600 px；高度：400像素；/div
//选项
pieEcharts () {
var myChart=this .$ e图表。init(文档。getelementbyid( pie ))
//配置图表
定义变量选项={
标题：{
文本："网站的推荐人",
潜台词："假数据",
左："中间"
},
工具提示：{
触发器："项目"
},
图例：{
方向："垂直",
左："左"
},
系列：[
{
名称："访问来源",
类型："饼图",
半径："50%",
数据：[
{值：1048，名称：搜索引擎 },
{ value: 735，name: Direct }，
{ value: 580，name: Email }，
{值：484，名称：联盟广告 },
{值：300，名称：视频广告 }
],
重点：{
项目样式：{
暗影模糊：10,
shadowOffsetX: 0，
阴影颜色： rgba(0，0，0，0.5)
}
}
}
]
}
myChart.setOption(选项)
}
示例
vue-echart
优点:配置简单，方便使用安装
//vue 2
新公共管理安装电子产品vue-电子产品
npm i -D @vue/composition-api
//vue 3
新公共管理安装电子产品vue-电子产品
引用
//可全局也可在要使用的文件中用
从"电子海图/核心"导入{使用}
从"电子图形/渲染器"导入{ CanvasRenderer }
从"电子图表/图表"导入{饼图}
导入{
标题组件，
工具提示组件，
传奇组件
}来自"电子图表/组件"
从" vue-echarts "导入电子海图，{ THEME_KEY }
使用([
CanvasRenderer，
饼状图，
标题组件，
工具提示组件，
传奇组件
])
使用
垂直图表class=chart :option=option /
导出默认值{
名称： ,
组件：{
“五形图":电子海图
},
提供：{
[THEME_KEY]:黑暗
},
data () {
返回{
//选项与原生一致
}
}
}
整体例子
模板
垂直图表class=chart :option=option /
/模板
脚本
从"电子海图/核心"导入{使用}
从"电子图形/渲染器"导入{ CanvasRenderer }
从"电子图表/图表"导入{饼图}
导入{
标题组件，
工具提示组件，
传奇组件
}来自"电子图表/组件"
从" vue-echarts "导入电子海图，{ THEME_KEY }
使用([
CanvasRenderer，
饼状图，
标题组件，
工具提示组件，
传奇组件
])
导出默认值{
名称：“HelloWorld”，
组件：{
“五形图":电子海图
},
提供：{
[THEME_KEY]:"光"
},
data () {
返回{
选项：{
标题：{
文本："网站的推荐人",
潜台词："假数据",
左："中间"
},
工具提示：{
触发器："项目"
},
图例：{
方向："垂直",
左："左"
},
系列：[
{
名称："访问来源",
类型："饼图",
半径："50%",
数据：[
{值：1048，名称：搜索引擎 },
{ value: 735，name: Direct }，
{ value: 580，name: Email }，
{值：484，名称：联盟广告 },
{值：300，名称：视频广告 }
],
重点：{
项目样式：{
暗影模糊：10,
shadowOffsetX: 0，
阴影颜色： rgba(0，0，0，0.5)
}
}
}
]
}
}
}
}
/脚本
样式范围。图表{
高度：400像素
}
/风格
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。