Table of contents
1.JavaScript source code running file to run the code
2. A text editor such as notepad++ is required
1. Preview of renderings
2. Preparation
1.JavaScript source code running file to run the code
Need to download the running file yourself
https://pan.baidu.com/s/1shmtM36HgRqC0S1OXpNWpg?pwd=yozs
2. A text editor such as notepad++ is required
A useful text editor can make editing and error checking more convenient. Of course, you can also use Notepad for editing.
3. Write image attribute code
1. Editing interface preview
2. Complete code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<!-- //图形在网页的长宽 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:'center',
textStyle:{
color:'red',
fontSize:35,
textShadowColor:'break',
color:'#ffffff',//白色
}
},//标题
//backgroundColor:'#4F4F4F',//灰色背景
backgroundColor:'darkMode',//暗黑背景
tooltip: {},
xAxis: {
splitLine: {
show: true,
lineStyle: {
color: ['grey'],
width: 0.5,
type: 'solid'
},
},
axisLabel: {
textStyle: {
color: '#ffffff',
fontSize:25,
},
},
axisTick:{
show:false,
},
data: ['数据1', '数据2', '数据3', '数据4', '数据5', '数据6', '数据7']
},//
yAxis: {
/*name:'商品销量',
type:'category',
axisLine :{
show:true,//显示y轴线
symbol:['none','arrow'],//y轴箭头
},*/
splitLine: {
show: true,
lineStyle: {
color: ['grey'],
width: 0.5,
type: 'solid'
},
},
interval:10,//y轴数值距离
axisLabel: {
inside:false,
textStyle: {
color: '#ffffff',
fontSize:12,
itemSize:'',
},
},
},
series: [
{
//name: '二月销量',
type: 'effectScatter',
type:'bar',
data: [80, 75, 68, 65, 80,72, 97],
itemStyle: {
normal: {
//这里是重点
color: function(params) {
//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
var colorList = ['#0072E3','#FF359A', '#EAC100', '#82D900', '#00FFFF','#97CBFF', '#A6A6D2'];
return colorList[params.dataIndex]
}
}
}
},
/* {
name: '三月销量',
type: 'bar',
data: [50, 30, 20, 40, 60, 80]
}*/
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>After editing is completed, it needs to be saved as an html file, otherwise it cannot be run.
4. Operation
Note: The html file needs to be in the same directory as the js file, otherwise you need to specify the path when introducing the ECharts file in image code editing.
Open the html file in the browser to view the running results.
If you want to know and learn more graphics configuration items, you can visit Echarts official website
https://echarts.apache.org/zh/option.html#title
Finally, if the content is helpful to you, please give it a like! !