本文介绍一款非常好用的图表绘画工具---echarts
|
npm 安装 ECharts
你可以使用如下命令通过 npm 安装 ECharts
npm install echarts
安装完成后,就可以在vue中使用了。
编写 echarts案例
<template>
<div id="app">
<div ref="chart" class="container"></div>
</div>
</template>
<script>
import echarts from 'echarts';
export default {
name: "App",
mounted(){
let myChart = echarts.init(this.$refs.chart);
let option={
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
myChart.setOption(option);
}
}
</script>
<style>
.container{
width:500px;
height:300px;
}
</style>
流程解释
1,通过 npm 上安装的 ECharts 和 zrender 会放在node_modules目录下。可以直接在项目代码中import echarts from ‘echarts’;得到 ECharts。
2, 基于准备好的dom,初始化echarts实例。let myChart = echarts.init(this.$refs.chart);(就是与div里面的chart绑定)
3,图表样例 let option={…}
4,绘制图表 myChart.setOption(option);
上面的是柱状图,我们想要折线图与饼状图示例(或者多个不同的图),只需要替换增加以上的不同option
折线图与饼状图示例
只需要替换option就可以了。
let option2 = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
let option3= {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}]
};