1.样式展示
不知道有没有人在别人的网站看到过这种样式的图表。
我感觉还挺好看的。所以去网上看了一下，学习了一下。现在分享给大家。大家也可以运用到自己的博客网站里。做数据统计蛮好看的。
2.引入Echart
其实这也是一个类似于elementUI的东西，我们首先引入他。
<pre spellcheck="false" class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" lang="" cid="n7" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "Roboto Mono", "Source Sans Pro", Monaco, courier, monospace !important; font-size: 0.85rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248) !important; position: relative !important; padding: 0.3rem 0px !important; width: inherit; border: 1px solid rgb(244, 244, 244); -webkit-font-smoothing: initial; line-height: 1.43rem; border-radius: 2px; overflow-wrap: normal; margin: 0.8rem 0px !important; color: rgb(52, 73, 94); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> npm install echarts --save</pre>
2.1 饼状图
首先我们来创建饼状图。
<pre spellcheck="false" class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" lang="html" cid="n10" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "Roboto Mono", "Source Sans Pro", Monaco, courier, monospace !important; font-size: 0.85rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248) !important; position: relative !important; padding: 0.3rem 0px !important; width: inherit; border: 1px solid rgb(244, 244, 244); -webkit-font-smoothing: initial; line-height: 1.43rem; border-radius: 2px; overflow-wrap: normal; margin: 0.8rem 0px !important; color: rgb(52, 73, 94); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> <template>
<div class="pie-chart" id="pie-chart"></div>
</template>
<script>
import echarts from 'echarts'
export default {
mounted() {
this.initPieData();
},
data() {
return {
category: {
android: 10,
python: 20,
java: 15,
mysql: 8,
nginx: 12,
}
}
},
methods: {
initPieData() {
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.getElementById('pie-chart'));
// 绘制图表
myChart.setOption({
toolbox: {
feature: {
saveAsImage: {}
}
},
title: {
text: '网站文章分类饼状图',//主标题
subtext: '测试用一下',//副标题
x: 'center',//x轴方向对齐方式
},
tooltip: {
trigger: 'item',
formatter: "{a}
{b} : {c} ({d}%)"
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '40%',
//第一个控制左右距离，第二个控制标题与图形距离
center: ['50%', '50%'],
data: [
{value: this.category.android, name: '安卓'},
{value: this.category.python, name: 'python'},
{value: this.category.mysql, name: '数据库'},
{value: this.category.nginx, name: 'nginx'},
{value: this.category.java, name: 'java'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
}
}
]
});
},
}
</script>
<style>
.pie-chart {
margin-top: 20px;
width: 319px;
height: 240px;
}
</style></pre>
结果展示：
2.2雷达图
<pre spellcheck="false" class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" lang="html" cid="n14" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: "Roboto Mono", "Source Sans Pro", Monaco, courier, monospace !important; font-size: 0.85rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248) !important; position: relative !important; padding: 0.3rem 0px !important; width: inherit; border: 1px solid rgb(244, 244, 244); -webkit-font-smoothing: initial; line-height: 1.43rem; border-radius: 2px; overflow-wrap: normal; margin: 0.8rem 0px !important; color: rgb(52, 73, 94); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"> <template>
<div class="radar-chart" id="radar-chart"></div>
</template>
<script>
export default{
mounted() {
this.initRadarData();
},
initRadarData() {
const myChart = echarts.init(document.getElementById('radar-chart'));
myChart.setOption({
toolbox: {
feature: {
saveAsImage: {}
}
},
tooltip: {},
radar: {
name: {
textStyle: {
color: '#000',
borderRadius: 3,
padding: [3, 5]
}
},
axisLine: {
lineStyle: {
color: 'rgba(131,141,158,.1)',
},
},
indicator: [{
name: 'java',
max: 30,
},
{
name: 'nginx',
max: 30
},
{
name: '数据库',
max: 30
},
{
name: 'python',
max: 30
},
{
name: '安卓',
max: 30
},
{
name: 'python',
max: 30
},
],
splitArea: {
show: false,
areaStyle: {
color: 'rgba(255,0,0,0)', // 图表背景的颜色
},
},
splitLine: {
show: true,
lineStyle: {
width: 1,
color: 'rgba(131,141,158,.1)', // 设置网格的颜色
},
},
},
series: [{
center: ['50%', '60%'],
type: 'radar',
data: [{
value: [15, 12, 8, 20, 10, 15],
itemStyle: {
normal: {
color: '#5B8FF9',
lineStyle: {
color: '#5AD8A6',
},
},
},
}
]
}]
})
},}
</script>
<style>
.radar-chart {
margin-top: 20px;
width: 319px;
height: 240px;
}
</style></pre>
结果展示：
3.总结：
其实从上面两个列子，就可以看出来。这个东西挺简单的。
引入
初始化一下
定义一下数据
绘制
在mounted时调用一下绘制方法就完事了。
这个echart感觉还挺厉害的，它的教程网址。
