1.echarts引入
在官网下载并放入项目中。
引入echarts.js文件：
<script src="./echarts.js"></script>
注意你的文件存放路径！
2.echarts使用
2.1设置一个图标的容器
<div id="box"></div>
2.2 在js中 找到图标容器
var box = document.getElementById("box");
2.3 在容器中初始化图标实例
var myChart = echarts.init(box);
-
2.2 和2.3合成一句代码
var myChart = echarts.init(document.getElementById("box"));
2.4 设置图标配置和数据
myChart.setOption({
title: { // 标题，不写也行
text: "这是图标的标题",
textStyle: {
color: "green"
}
},
tooltip: {
},
xAxis: { // 柱状图的横坐标
name: "商品类型",
nameLocation: "center",
nameGap: 30,
data: ['手机', '电脑', '百货', '食品', '鞋服']
},
yAxis: {
name: "数值",
// min: 0,
// max: 100
}, //柱状图的纵坐标
legend: { //图标系列标记
data: ['数量', '销量', '销量额'],
// 自定义系列标记
icon: "image://head_default.jpg",
itemWidth: 14
},
series: [ //图标类型和数据(每一个对象就是一个系列)
{
name: '数量', //图标系列名
type: 'bar', //图表类型，bar表示柱状图
data: [4, 8, 2, 5, 3] //表示图标数据
}, {
name: '销量', //图标系列名
type: 'bar', //图表类型，bar表示柱状图
data: [32, 48, 23, 56, 39], //表示图标数据
label: {
show: true
}
}, {
name: '销量额', //图标系列名
type: 'line', //图表类型，line表示折线图
data: [32, 48, 23, 56, 39] //表示图标数据
}
]
})
-
tooltip: {}：鼠标放到图上边会有数据提示，但是一定要注意图标容器设置宽高一定要按照id设置，不然容易于echarts发生冲突
-
xAxis:{} 设置横坐标，其中的data数据是一个数组,可以通过后台接口获取
-
lengend:{}中的data数据要和series里边每一个对象的name值相对应,每个图标系列可以自定义系列标记，用过icon属性自定义系列标记
-
series:[{},{}...] 图标类型和数据，每一个对象就是一个系列。其中的type决定图标类型，决定是柱状图还是饼图
3，3d图表
-
引入echarts.js不要引入精简版，需要引入echarts-gl扩展，需要引入jquery
-
引入之后，3d图表粘贴的js中require那两句代码可以删掉。
// var echarts = require('echarts'); 用上边导入eacharts.js代替
// require('echarts-gl'); 官网下载gl扩展下载 并且引入js文件
4，echarts通过计时器动态更新数据
4.1，柱状图动态更新数据
柱状图：通过计时器个更新数据，设置新的数据赋值给数组然后再重新弄设置图表配置和数据，获取新的数据，从而动态显示。
// 找到图表容器
var box3 = document.getElementById("leftBottomBox")
// 在容器中初始化图表实例
var myChart3 = echarts.init(box3)
// 设置图表配置和数据
myChart3.setOption({
title: {
text: "商品销量",
textStyle: {
color: "green"
}
},
tooltip: { // 鼠标悬停到图表上时的提示框
},
xAxis: { // 柱状图的横坐标 (每一个商品分类)
name: "商品类型",
nameLocation: "center",
nameGap: 30,
data: ["手机", "电脑", "百货", "鞋服", "食品"]
},
yAxis: { // 柱状图的纵坐标 (每一个分类的商品数量)
name: "数值",
// min: 0,
// max: 100
},
legend: { // 图表系列标记, 一定要和系列名对应
data: ["数量", "销量"],
// 自定义系列标记
// icon: "image://item273.png",
// itemWidth: 14, // 图标宽度
textStyle: {
color: 'white'
},
inactiveColor: "gray"
},
series: [ // 图表类型和数据 (每一个对象是一个图表)
{
name: "数量", // 图表系列名
type: "bar", // 图表类型 bar柱状图
data: [4, 8, 2, 5, 3] // 图表数据,
},
{
name: "销量", // 图表系列名
type: "bar", // 图表类型 bar柱状图
data: [32, 45, 23, 56, 39], // 图表数据
label: {
show: true
}
}
]
})
var data1 = [4, 8, 2, 5, 3];
var data2 = [32, 45, 23, 56, 39]
//计时器动态更新
setInterval(() => {
data1 = data1.map(item => {
item += parseInt(Math.random() * 5)
if (item > 80) {
item = parseInt(Math.random() * 10)
}
return item
})
data2 = data2.map(item => {
item += parseInt(Math.random() * 3)
if (item > 120) {
item = parseInt(Math.random() * 10 + 10)
}
return item
})
myChart3.setOption({
series: [
{
data: data1
},
{
data: data2
}
]
})
}, 500);
4.2折线图 动态更新数据
先清理掉旧的折线图，然后再重新配置图表。
// 找到图表容器
var box2 = document.getElementById("leftTopBox")
// 在容器中初始化图表实例
var myChart2 = echarts.init(box2)
// 设置图表配置和数据
var option2 = {
title: {
text: "商品销售额",
textStyle: {
color: "green"
}
},
tooltip: { // 鼠标悬停到图表上时的提示框
},
xAxis: { // 柱状图的横坐标 (每一个商品分类)
name: "商品类型",
nameLocation: "center",
nameGap: 30,
data: ["手机", "电脑", "百货", "鞋服", "食品"]
},
yAxis: { // 柱状图的纵坐标 (每一个分类的商品数量)
name: "数值",
min: 10
// max: 100
},
legend: { // 图表系列标记, 一定要和系列名对应
data: ["销售额"],
// 自定义系列标记
// icon: "image://item273.png",
// itemWidth: 14 // 图标宽度
textStyle: {
color: 'white'
},
inactiveColor: "gray"
},
series: [ // 图表类型和数据 (每一个对象是一个图表)
{
name: "销售额", // 图表系列名
type: "line", // 图表类型 line折线图
data: [24, 17, 20, 25, 12] , // 图表数据,
lineStyle:{
width: 5,
color: 'yellow'
}
}
]
}
myChart2.setOption(option2)
setInterval(() => {
myChart2.clear()
myChart2.setOption(option2)
}, 3000);
4.3，饼图动态更新数据
同柱状图一样
var box5 = document.getElementById("rightTopBox")
var myChart5 = echarts.init(box5)
var option5 = {
tooltip: {},
series: [
{
name: "店铺商品分布",
type: "pie", // pie表示饼图类型
radius: "55%", // 圆的直径占容器短边比例
// roseType: 'angle', //南丁格尔图
data: [
{ name: "张三旗舰店", value: "45" },
{ name: "彬哥零食屋", value: "23" },
{
name: "浩鲸杂货铺",
value: "13",
// 当前这个扇形样式
itemStyle: {
normal: {
shadowBlur: 20,
shadowColor: 'rgb(255, 0, 0)'
}
}
},
{ name: "智游二手机", value: "33" }
],
// 每一个扇形的样式
itemStyle: {
normal: {
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart5.setOption(option5)
// 监听窗口变化, 重置图表尺寸
window.onresize = function () {
myChart5.resize()
}
setInterval(() => {
// 重置图表
myChart5.clear()
myChart5.setOption(option5)
}, 5000);
4.4，雷达图动态更新数据
同折线图一致
var box6 = document.getElementById("rightBottomBox")
var myChart6 = echarts.init(box6)
var option6 = {
title: {
text: '雷达图',
textStyle: {
color: "green"
}
},
legend: {
data: ['伽罗', '妲己'],
textStyle: {
color: 'white'
},
inactiveColor: "gray"
},
radar: {
// 雷达图中每一项的数据参数,
indicator: [
{ name: '胜率', max: 100 },
{ name: '胜场数', max: 1000 },
{ name: 'MVP', max: 200 },
{ name: '五杀', max: 30 },
{ name: '信誉值', max: 100 }
]
},
series: [
{
name: '本赛季英雄数据',
type: 'radar',
data: [
{
value: [79, 246, 120, 16, 98],
name: '伽罗',
areaStyle:{
color: "red",
opacity: 0.3
}
},
{
value: [65, 688, 160, 22, 80],
name: '妲己',
areaStyle:{
color: "blue",
opacity: 0.3
}
}
]
}
]
}
myChart6.setOption(option6)
setInterval(() => {
myChart6.clear()
myChart6.setOption(option6)
}, 10000);
// 监听窗口变化, 重置图表尺寸
window.onresize = function () {
myChart6.resize()
}
5，echarts连接数据库实时更新数据
通过请求接口连接数据库，接口中查询数据库并把数据库中的数据返回给浏览器，然后再echarts中设置图表配置的series传入data数据
var ROOT_PATH =
'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
var chartDom = document.getElementById('bottomBox');
var myChart4 = echarts.init(chartDom);
var option;
$.get(
ROOT_PATH + '/data/asset/data/life-expectancy-table.json',
function(data) {
option = {
grid3D: {},
tooltip: {},
xAxis3D: {
type: 'category'
},
yAxis3D: {
type: 'category'
},
zAxis3D: {},
visualMap: {
max: 1e8,
dimension: 'Population'
},
dataset: {
dimensions: [
'Income',
'Life Expectancy',
'Population',
'Country', {
name: 'Year',
type: 'ordinal'
}
],
source: data
},
series: [{
type: 'bar3D',
// symbolSize: symbolSize,
shading: 'lambert',
encode: {
x: 'Year',
y: 'Country',
z: 'Life Expectancy',
tooltip: [0, 1, 2, 3, 4]
}
}]
};
myChart4.setOption(option);
}
);
option && myChart4.setOption(option);
