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
Downloaded run file preview:
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 -->
<div id="main" style="width: 1000px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制正侧面
var positiveShape = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint
ctx.moveTo(shape.x+20, shape.y); //右上
ctx.lineTo(shape.x - 20, shape.y ); //左上
ctx.lineTo(xAxisPoint[0] - 20 , xAxisPoint[1] ); //左下
ctx.lineTo(xAxisPoint[0] +20, xAxisPoint[1]); //右下
ctx.closePath();
}
});
// 绘制右侧面
var rightShape = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint
ctx.moveTo(shape.x+25, shape.y-13); // 右上
ctx.lineTo(shape.x + 20, shape.y );
ctx.lineTo(xAxisPoint[0] +20 , xAxisPoint[1] );
ctx.lineTo(xAxisPoint[0]+25 , xAxisPoint[1]-13); //右下
ctx.closePath();
}
});
// 绘制顶部
var topShape = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
ctx.moveTo(shape.x+20, shape.y); //右下
ctx.lineTo(shape.x + 25, shape.y - 13); //右上
ctx.lineTo(shape.x - 15 , shape.y - 13); //左上
ctx.lineTo(shape.x - 20, shape.y ); //左下
ctx.closePath();
}
});
// 注册三个面图形
echarts.graphic.registerShape('positiveShape', positiveShape)
echarts.graphic.registerShape('rightShape', rightShape)
echarts.graphic.registerShape('topShape', topShape)
// 指定图表的配置项和数据
var option = {
backgroundColor: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{
offset: 0,
color: '#5f5e61'
},
{
offset: .4,
color: '#F8F8FF'
},
{
offset: .6,
color: '#F8F8FF'
},
{
offset: 1,
color: '#5f5e61'
}
]// (x1,y1) 点到点 (x2,y2) 之间进行渐变
),
tooltip: {},
legend: {
type:'plain',
data: ['满意率'],
top: 'middle',
orient: 'vertical',
icon: 'roundRect',
x:'right', //可设定图例在左（left）、右（right）、居中（center）、填写数字（填写100代表的是100px）
y:'center', //可设定图例在上（top）、下（bottom）、居中（center）、填写数字（填写100代表的是100px）
padding:[0,25,0,0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
itemHeight: 15,
itemWidth:15,
borderWidth:1,
color:"000",
itemStyle:{
borderColor:'#000',
},
borderColor:'black'
},//标签
xAxis: {
show: true,
type:'category',
//坐标轴轴线相关设置。
axisLine: {
lineStyle: {
//坐标轴颜色
color:'#000000'
}
},
//坐标轴刻度相关设置。
axisTick:{
show:false
},
axisLabel:{
show: true,
textStyle: {
color: '#000000', //坐标轴文字颜色
}
},
axisTick:{
show:true,//是否展示轴刻度
inside:true//坐标轴刻度是否朝内
},
data: ['客户服务', '公共秩序服务', '公共维修服务', '上门维修服务', '绿化养护服务', '公共保洁服务','社区文化建设']
},
yAxis: {
//坐标轴轴线相关设置。
show:'category',
type:'value',
//自动计算的坐标轴最大间隔大小
maxInterval:100,
//坐标轴轴线相关设置。
axisLine: {
show: true,
lineStyle: {
//坐标轴线的颜色。
color: '#000000'
}
},
axisTick: {
show: false
},
splitLine:{ //坐标轴在 grid 区域中的分隔线。
show:true,
lineStyle: { //分隔线颜色
color:'#000000',
width:0.5 //分隔线线宽。
}
},
axisTick:{
show:true,//是否展示轴刻度
inside:true,//坐标轴刻度是否朝内
},
},
series: [
{
name: '满意率',
type: 'custom',
barWidth:28, //柱条的宽度
color:'#DAA520',
/*labelLayout(params, api) {
return {
x: location[0],
y: location[1],
verticalAlign: 'top',
align: 'left'
}
},*/
renderItem: function(params, api) {
const location = api.coord([api.value(0), api.value(1)])
return {
type: 'group',
children: [{
//正面
type: 'positiveShape',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: '#DAA520'
}
},
{
type: 'rightShape',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: '#444444'
}
},
{//顶部
type: 'topShape',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: '#D8860B'
}
}]
}
},
data: [{
value: 20.4,
itemStyle: {
color: '#DAA520',
}
},
{
value: 27.4,
itemStyle: {
color:'#DAA520',
}
},
{
value: 90,
itemStyle: {
color:'#DAA520',
}
},
{
value: 20.4,
itemStyle: {
color:'#DAA520',
}
},
{
value: 80,
itemStyle: {
color:'#DAA520',
}
},
{
value: 80,
itemStyle: {
color:'#DAA520',
}
},
{
value: 80,
itemStyle: {
color:'#DAA520',
}
}],
},
{
//柱形顶端显示x轴数据
type: "bar",
label: {
normal: {
show: true,
position: "top",
fontSize: 14,
color: "#000000",
},
},
itemStyle: {
color: "transparent",
},
data:['20.4','27.4','90','20.4','80','80','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
Documentation - Apache ECharts
Finally, if the content is helpful to you, please give it a like! !