静态
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div id="div1" style="width: 600px;height: 400px;"></div>
<script>
var myChart = echarts.init(document.getElementById("div1"));
//bar
// var option={
// legend:{
// data:['steps']
// },
// xAxis:{
// data:['monday','tuesday','wednesday']
// },
// yAxis:{},
// series:[
// {
// name:'steps',
// type:'bar',
// data:[8000,11000,9000]
// },
// ]
// }
//line
// var option={
// xAxis:{
// type:'category',
// data:['monday','tuesday','wednesday']
// },
// yAxis:{
// type:'value'
// },
// series:[
// {
// type:'line',
// data:[8000,11000,9000]
// },
// ]
// }
//pie
var option = {
series: [
{
type: 'pie',
data: [
{
name: 'monday',
value: 8000
},
{
name: 'tuesday',
value: 11000
},
{
name: 'wednesday',
value: 9000
}
]
}
]
}
myChart.setOption(option);
</script>
</body>
</html>
动态
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
<div id="div1" style="width: 600px;height: 400px"></div>
<div id="div2" style="width: 600px;height: 400px"></div>
<div id="div3" style="width: 600px;height: 400px"></div>
<script type="text/javascript">
axios
.get('http://localhost:8080/json')
.then(function (response) {
backendData = response.data;
//[{id: 1, name: "jobs", score: 99}, {id: 2, name: "musk", score: 98}, {id: 3, name: "json", score: 95}]
var x_data = [], y_data = [], p_data = [];
for (var i = 0; i < backendData.length; i++) {
x_data[i] = backendData[i].name;
y_data[i] = backendData[i].score;
var person = {};
person.name = backendData[i].name;
person.value = backendData[i].score
p_data[i] = person;
}
//bar
var barChart = echarts.init(document.getElementById("div1"));
var option = {
legend: {
data: ['score']
},
xAxis: {
data: x_data
},
yAxis: {},
series: [
{
name: 'score',
type: 'bar',
data: y_data
}
]
}
barChart.setOption(option);
//line
var lineChart = echarts.init(document.getElementById("div2"));
var option = {
xAxis: {
type: 'category',
data: x_data
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
data: y_data
}
]
}
lineChart.setOption(option);
//pie
var pieChart = echarts.init(document.getElementById("div3"));
var option = {
tooltip: {
trigger: 'item'
},
series: [
{
type: 'pie',
data: p_data
}
]
}
pieChart.setOption(option);
})
</script>
</body>
</html>
