vue+echarts数据图表展示
发布时间
阅读量：
阅读量
1.安装Echarts
npm install Echarts --save
代码解释2.引入Echarts
在需要的页面import引入。我的例子是将图表创建成组件，最后在App.vue渲染出来。
在components目录下创建文件Chart.vue，引入echarts包
import echarts from 'echarts'
代码解释3.使用
①添加容器，添加样式。
<template>
<div>
<h2>vue中插入Echarts示例</h2>
<div id="chart_example">
</div>
</div>
</template>
代码解释 #chart_example{
width: 60%;
height: 600px;
border: 2px solid rgba(224, 108, 108, 0.719);
border-radius: 4px;
margin: 10px auto;
}
代码解释②定义组件渲染到dom
let myChart = echarts.init(document.getElementById('chart_example'));
代码解释③配置图表参数option。具体的都已经参照文档添加了注释
/** * 使用 option 来描述其对图表的各种需求，
* 包括：有什么数据、要画什么图表、图表长什么样子、
* 含有什么组件、组件能操作什么事情等等。简而言之，
* option 表述了：数据、数据如何映射成图形、交互行为
*/
let option = {
backgroundColor: 'rgb(43,51,59)', // 背景颜色
// color: ['rgb(181,127,133)', 'rgb(114,194,179)'], // 全局调色板
/** * 组件component是echarts中的各种内容，xAixs(直角坐标系x轴),polar(极坐标系底板)。。。
*/
tooltip : { // 提示框组件
trigger: 'axis',
axisPointer : { // 鼠标悬浮在柱状图上的样式
type : 'shadow'
}
},
legend: {
textStyle: {
color: 'white'
}
}, // 图表上方的图标实例
xAxis : [ // 直角坐标系x轴
{
type : 'category',
data : this_.xData,
axisTick: {
alignWithLabel: true
},
axisLabel: { // x轴的字体样式
show: true,
textStyle: {
color: 'rgb(231,234,237)'
}
},
splitLine: { // 控制网格线是否显示
show: false,
lineStyle: { // 轴线颜色
color: 'red'
}
},
axisLine: { // x轴线的颜色和宽度
lineStyle: {
color: 'rgb(231,234,237)',
width: 3 // 坐标轴的宽度
}
}
}
],
yAxis : [ // 直角坐标系y轴
{
type : 'value',
axisLabel: { // y轴字体样式
show: true,
color: 'rgb(231,234,237)'
},
// axisLine: { // y坐标轴
// lineStyle: {
// color: 'rgb(231,234,237)'
// }
// },
splitLine: { // y轴轴线
show: true,
color: 'rgb(231,234,237)'
}
}
],
series : [ // 系列是指：一组数值以及他们映射成的图。
{
name:'产量', // 鼠标悬浮显示的文字
type:'line', // 图表类型，折线line，柱状bar等
data: this_.lineData, // 绑定数据
color: 'rgb(255,234,169)' // 图像颜色
},
{
name: '销量',
type: 'bar', // 柱状图
barWidth: '10%', // 柱状图的柱状宽度
data: this_.barData, // 绑定数据
color: 'rgb(13,188,121)' // 图像颜色
},
{ // 饼图
type: 'pie',
center: ['65%', 60],
radius: 35,
top: 10, // 图形与顶部的距离
// roseType: 'angle', // 南丁格尔图
label: { // 标签样式
textStyle: { // 标签文字样式
color: 'rgb(231,234,237)'
}
},
labelLine: { // 标签引导线样式
lineStyle: {
color: 'rgb(231,234,237)'
}
},
color: ['rgb(132,175,232)', 'rgb(100,65,164)', 'rgb(255,231,147)', 'rgb(88,157,255)', 'rgb(249,203,220)'], // 扇形的调色板
emphasis: { // 高亮的样式
itemStyle: { // 高亮颜色
color: 'rgb(13,188,121)'
},
label: { // 高亮时标签文字
show: true, // 显示标签
formatter: '这是高亮的标签'
}
},
data: this_.pieData
}
]
};
代码解释④渲染图表
myChart.setOption(option);
代码解释⑤自动缩放
window.addEventListener('resize',function() {myChart.resize()});
代码解释⑥ 在App.vue引入组件
<template>
<div id="app">
<Chart id="test" />
<router-view/>
</div>
</template>
<script>
import Chart from './components/Chart'
export default {
name: 'App',
components: {
Chart
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
padding: 0px;
margin: 0px;
/* margin-top: 60px; */
}
</style>
代码解释⑦效果图
4.Chart.vue完整代码
<template>
<div>
<h2>vue中插入Echarts示例</h2>
<div id="chart_example">
</div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
data() {
return {
barData: [820,646,344,798,604,226,680,576,846,225,547,346],
lineData: [995,666,744,858,654,536,645,746,846,625,547,556],
pieData: [
{name: 'a', value: 165},
{name: 'b', value: 45},
{name: 'c', value: 80},
{name: 'd', value: 110},
{name: 'e', value: 77}
],
xData: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',]
}
},
mounted() {
let this_ = this;
let myChart = echarts.init(document.getElementById('chart_example'));
myChart.showLoading() // 显示正在加载图标
/** * 使用 option 来描述其对图表的各种需求，
* 包括：有什么数据、要画什么图表、图表长什么样子、
* 含有什么组件、组件能操作什么事情等等。简而言之，
* option 表述了：数据、数据如何映射成图形、交互行为
*/
let option = {
backgroundColor: 'rgb(43,51,59)', // 背景颜色
// color: ['rgb(181,127,133)', 'rgb(114,194,179)'], // 全局调色板
/** * 组件component是echarts中的各种内容，xAixs(直角坐标系x轴),polar(极坐标系底板)。。。
*/
tooltip : { // 提示框组件
trigger: 'axis',
axisPointer : { // 鼠标悬浮在柱状图上的样式
type : 'shadow'
}
},
legend: {
textStyle: {
color: 'white'
}
}, // 图表上方的图标实例
xAxis : [ // 直角坐标系x轴
{
type : 'category',
data : this_.xData,
axisTick: {
alignWithLabel: true
},
axisLabel: { // x轴的字体样式
show: true,
textStyle: {
color: 'rgb(231,234,237)'
}
},
splitLine: { // 控制网格线是否显示
show: false,
lineStyle: { // 轴线颜色
color: 'red'
}
},
axisLine: { // x轴线的颜色和宽度
lineStyle: {
color: 'rgb(231,234,237)',
width: 3 // 坐标轴的宽度
}
}
}
],
yAxis : [ // 直角坐标系y轴
{
type : 'value',
axisLabel: { // y轴字体样式
show: true,
color: 'rgb(231,234,237)'
},
// axisLine: { // y坐标轴
// lineStyle: {
// color: 'rgb(231,234,237)'
// }
// },
splitLine: { // y轴轴线
show: true,
color: 'rgb(231,234,237)'
}
}
],
series : [ // 系列是指：一组数值以及他们映射成的图。
{
name:'产量', // 鼠标悬浮显示的文字
type:'line', // 图表类型，折线line，柱状bar等
data: this_.lineData, // 绑定数据
color: 'rgb(255,234,169)' // 图像颜色
},
{
name: '销量',
type: 'bar', // 柱状图
barWidth: '10%', // 柱状图的柱状宽度
data: this_.barData, // 绑定数据
color: 'rgb(13,188,121)' // 图像颜色
},
{ // 饼图
type: 'pie',
center: ['65%', 60],
radius: 35,
top: 10, // 图形与顶部的距离
// roseType: 'angle', // 南丁格尔图
label: { // 标签样式
textStyle: { // 标签文字样式
color: 'rgb(231,234,237)'
}
},
labelLine: { // 标签引导线样式
lineStyle: {
color: 'rgb(231,234,237)'
}
},
color: ['rgb(132,175,232)', 'rgb(100,65,164)', 'rgb(255,231,147)', 'rgb(88,157,255)', 'rgb(249,203,220)'], // 扇形的调色板
emphasis: { // 高亮的样式
itemStyle: { // 高亮颜色
color: 'rgb(13,188,121)'
},
label: { // 高亮时标签文字
show: true, // 显示标签
formatter: '这是高亮的标签'
}
},
data: this_.pieData
}
]
};
myChart.setOption(option);
myChart.hideLoading() // 隐藏加载图标
//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
window.addEventListener('resize',function() {myChart.resize()});
},
methods: {},
watch: {},
created() {
}
}
</script>
<style scoped>
h2{
text-align: center;
padding: 30px;
font-size: 18px;
}
#chart_example{
width: 60%;
height: 600px;
border: 2px solid rgba(224, 108, 108, 0.719);
border-radius: 4px;
margin: 10px auto;
}
</style>
代码解释全部评论 (0)
还没有任何评论哟~