文章目录
- 前言
- 一、数据可视化是什么?
- 二、使用步骤
- 1.引入库
- 2.准备一个具有大小的DOM容器
- 3.初始化echarts实例对象
- 4.指定配置项和数据
- 5.将配置项设置给echarts实例对象
- 总结
前言
没啥好说的
一、数据可视化是什么?
简单来说,就是一个js文件,把它引入到HTML中,就能使用这个库里的图形;
他可以更直观的表达数据;
二、使用步骤
1.下载并引入
代码如下(示例):
npm install echarts
2.准备一个具备大小的DOM容器
代码如下(示例):
<div id="main"></div>
注意:在项目中,单组件中如何使用它?
从下面第三步开始到第五步,把他写在methods中
import * as echarts from 'echarts'
export default {
data (){
return {};
},
mounted (){
this.demo();//调用
},
methods(){
demo(){
//代码从3到5
}
}
}
注意:在项目中,所有的组件中如何使用它?
在你项目的main.js文件中,添加下面两行:
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts//绑在原型链上,让所有人使用它
3.初始化echarts实例对象(所有组件能使用的时候,下面这条加个this.)
var myChart = echarts.init(document.getElementById("main"));
var myChart = this.echarts.init(document.getElementById("main"));//像这样
4.指定配置项和数据
var option={
title: {//标题组件
text: 'Nightingale Chart',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {//提示框组件
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {//图例组件
left: 'center',
top: 'bottom',
data: [
'rose1',
'rose2',
'rose3',
'rose4',
'rose5',
'rose6',
'rose7',
'rose8'
]
},
toolbox: {//工具栏
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [//系列列表
{
name: 'Radius Mode',
type: 'pie',
radius: [20, 140],
center: ['25%', '50%'],
roseType: 'radius',
itemStyle: {
borderRadius: 5
},
label: {
show: false
},
emphasis: {
label: {
show: true
}
},
data: [
{ value: 40, name: 'rose 1' },
{ value: 33, name: 'rose 2' },
{ value: 28, name: 'rose 3' },
{ value: 22, name: 'rose 4' },
{ value: 20, name: 'rose 5' },
{ value: 15, name: 'rose 6' },
{ value: 12, name: 'rose 7' },
{ value: 10, name: 'rose 8' }
]
},
{
name: 'Area Mode',
type: 'pie',
radius: [20, 140],
center: ['75%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 5
},
data: [
{ value: 30, name: 'rose 1' },
{ value: 28, name: 'rose 2' },
{ value: 26, name: 'rose 3' },
{ value: 24, name: 'rose 4' },
{ value: 22, name: 'rose 5' },
{ value: 20, name: 'rose 6' },
{ value: 18, name: 'rose 7' },
{ value: 16, name: 'rose 8' }
]
}
]
}
5.将配置项设置给echarts实例对象
myChart.setOption(option);
总结
祝你今天也开心