1. レンダリングのプレビュー
2. 準備
1.コードを実行するためのJavaScriptソースコード実行ファイル
実行ファイルを自分でダウンロードする必要がある
https://pan.baidu.com/s/1shmtM36HgRqC0S1OXpNWpg?pwd=yozs
2. notepad++などのテキストエディタが必要です
便利なテキスト エディタを使用すると、編集やエラー チェックがより便利になります。もちろん、メモ帳を使用して編集することもできます。
3. 画像属性コードを記述する
1. 編集インターフェースのプレビュー
2. 完全なコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 1200px;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '国内手机性价比对比',//标题
left:20, //相对左侧距离
top:20, //相对顶部距离
target: 'self',
textStyle: {
color:'#fff', //白
fontSize: 25, //字体大小
},
},
//背景颜色
backgroundColor:'#000033',
tooltip: {},
radar:{
center:['65%','50%'], //圆心位置
indicator:[
{name:'外观'},
{name:'拍照'},
{name:'系统'},
{name:'内存'},
{name:'屏幕'},
{name:'性能'},
],
axisName: {
color: '#fff',//字体颜色
fontSize: 30, //字体大小
},
},
color: ['#59c4e6', '#fcce10', '#cbb0e3', '#7bd9a5'],//四个标签对应的颜色
legend: {
data: ['华为','OPPO','VIVO','小米'],
orient: "vertical",//纵向排列
left:140, //相对左侧距离
top:100, //相对顶部距离
textStyle:{
fontSize: 20, //字体大小
color:'#eeeeee'
}
},
series:
[
{
type:'radar',
data:[
{value:[80,60,80,70,70,90],name:'华为',areaStyle: {color:'#59c4e6',opacity: 0.2}},
{value:[90,90,70,60,82,90],name:'OPPO',areaStyle: {color:'#fcce10',opacity: 0.2}},
{value:[30,60,30,80,90,60],name:'VIVO',areaStyle: {color:'#cbb0e3',opacity: 0.2}},
{value:[50,70,80,50,65,70],name:'小米',areaStyle: {color:'#7bd9a5',opacity: 0.2}}
]
}
]//series_end
};//op_end
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>編集が完了したら、HTML ファイルとして保存する必要があります。保存しないと実行できません。
4. 操作
注: html ファイルは、js ファイルと同じディレクトリにある必要があります。そうでない場合は、画像コード編集で ECharts ファイルを導入するときにパスを指定する必要があります。
ブラウザで HTML ファイルを開いて、実行結果を表示します。
グラフィック構成項目についてさらに詳しく知りたい場合は、Echarts 公式 Web サイトにアクセスしてください。
最後に、内容が役に立った場合は、「いいね！」をお願いします。！